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

前言

相信学习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 的代码时。

3. 组合式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>