Vue3选项式API和组合式API详解

2023-12-22 21:36:20

前言

相信学习Vue3的人中大多数都是之前使用Vue2开发的,当拿到一个Vue3项目时就接触到了组合式api,但对于组合式api不了解的人第一眼看上去会觉得一头雾水。:“什么玩意,乱七八糟的,选项式api多好,方法变量分的明明白白的。”其实学习Vue3的第一步就是了解什么是选项式API和组合式API,只要了解清楚这个才能打开后续的学习。

1. 什么是选项式API和组合式API

1.1 选项式API(Option API)

对于熟悉使用Vue2的小伙伴来说,我们在Vue2项目中使用的就是组合式API。整个组件像是被一项一项配置出来的。把具有相同功能的放在一起,可以用包含多个选项的对象来描述组件的逻辑,例如?data、methods?和?mounted等等Vue的配置项。选项所定义的属性都会暴露在函数内部的?this?上,它会指向当前的组件实例。

选项式下发如下:

<script>
export default{
  data(){
    return {
      count:10,
      price:9.9,

    }
  },
  computed:{
    sun:()=>{
      return this.count*this.price;
    }
  },
  watch:{
    sum:(newVal,oldVal)=>{
      this.sumChanged(newVal);
    }
  }
}
created(){

},
mounted(){

},
methods:{
  sumChanged(newSum){
    console.log("总价已更新为:",this.sum);
  }
}

</script>
<template>
  <p>{{count}}</p>
  <p>{{price}}</p>
  <p>{{ sum }}</p>
</template>

1.2 组合式API(Composition API)

组合式API是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API:

例如?ref()?和?reactive(),使我们可以直接创建响应式状态、计算属性和侦听器

例如?onMounted()?和?onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。

不像选项式API一样,代码分块不是按照data、methods、computed等来分,而是根据逻辑来分块,以往需要找到这块功能的相关逻辑需要各种切换滚动,找来找去,用了组合式api之后妈妈再也不怕我找不到相关逻辑代码了,并且挪动这块代码到别的文件,不需要重新组织代码,大大降低重构成本,大大提高代码的可阅读性。

组合式写法如下:

<script setup>
import {ref,computed, watch} from 'vue';


// 下面这一块代码只负责处理数量、单价、总价逻辑
const count = ref(10);
const price = ref(9.9);

setTimeout(()=>{
  count.value = 200;
},3000);

const sum = computed(()=>{
  return count.value*price.value;
})

watch(sum,(newVal,oldVal)=>{
  sumChanged(newVal);
})
function sumChanged(newSum){
  console.log("您的总价已更新为:",newSum);
}
onMounted(()=>{

})

console.log(count.value);
console.log(price.value);
</script>
<template>
  <p>{{count}}</p>
  <p>{{price}}</p>
  <p>{{ sum }}</p>
</template>

2. 选项式API和组合式API各自的优势

2.1 选项式API的优缺点

优点:易于学习和使用,写代码的位置已经约定好了。相同的功能放在一起,归类很完美。新手上手简单。最直观的感受就是在学Vue2时比学Vue3时入门更简单。

缺点:代码组织性差,相似的逻辑代码复用性差,逻辑复杂代码多了不利于阅读。例如:在选项式Api中的变量都定义在data中,很多功能模块的变量都放在一起,导致变量非常的混乱,如果要迁移一个功能,需要在项目中查找该功能对应的变量时比较费时费力,大大降低了开发效率。

2.2 组合式API的优点

优点:逻辑性偏强,功能逻辑(比如数据、watch、方法等)可以写在一块容易查找,后期维护方便。例如:将一个功能的所有变量、方法、监听事件都放在一起,功能迁移时就不用去翻代码找变量,非常的方便。

缺点:相比选项式上手要难些,更加抽象一点,学习成本可能会增加。

?我们分别用选项式Api和组合式Api来实现一个相同的功能,比较直观的对比一下两者的区别

选项式Api代码示例?:

<script>
export default{
  data(){
    return {
      count:10,
      price:9.9,

    }
  },
  computed:{
    sun:()=>{
      return this.count*this.price;
    }
  },
  watch:{
    sum:(newVal,oldVal)=>{
      this.sumChanged(newVal);
    }
  }
}


/*

  这里有1000行代码………

*/

methods:{
  sumChanged(newSum){
    console.log("总价已更新为:",this.sum);
  }
}

</script>
<template>
  <p>{{count}}</p>
  <p>{{price}}</p>
  <p>{{ sum }}</p>
</template>

组合式Api代码示例:?

<script setup>
import {ref,computed, watch} from 'vue';

/*

  这里有10000行代码………

*/

// 下面这一块代码只负责处理数量、单价、总价逻辑
const count = ref(10);
const price = ref(9.9);

setTimeout(()=>{
  count.value = 200;
},3000);

const sum = computed(()=>{
  return count.value*price.value;
})

watch(sum,(newVal,oldVal)=>{
  sumChanged(newVal);
})
function sumChanged(newSum){
  console.log("您的总价已更新为:",newSum);
}

console.log(count.value);
console.log(price.value);
</script>
<template>
  <p>{{count}}</p>
  <p>{{price}}</p>
  <p>{{ sum }}</p>
</template>

在示例代码中,两个代码都中都实现了通过数量、单价计算总值的功能,假如中间有10000行代码,那么选项式Api的所有内容,贯穿了整个文件。而组合式Api将所有计算总计的变量都放在了一起非常滴方便。

3. Vue3中使用组合式API的两种方式

钩子是在组件中使用组合式 API 的入口,通常只在以下情况下使用:

  1. 需要在非单文件组件中使用组合式 API 时。
  2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

1. 组合式API ,我们可以使用响应式 API?来声明响应式的状态,在?setup()?函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取?setup()?暴露的属性:

<script>
import {ref} from 'vue';
export default{
  data(){
    return {
      price:9.9
    }
  },
  setup(){
    let count = ref(10);
    return {
      count
    }
  },
  created(){
    console.log(this.count);
    console.log(this.price);
  }
}
</script>
<template>
  <h1>{{count}}</h1>
  <h1>{{price}}</h1>
</template>

?2. 使用<script setup></script>,推荐使用该方法,对于结合单文件组件使用的组合式 API,推荐通过?<script setup>?以获得更加简洁及符合人体工程学的语法

<script setup>
import {ref} from 'vue';

const count = ref(10);
const price = ref(9.9);

console.log(count.value);
console.log(price.value);
</script>
<template>
  <p>{{count}}</p>
  <p>{{price}}</p>
</template>

文章来源:https://blog.csdn.net/qq_41765777/article/details/135145722
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。