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 上,它会指向当前的组件实例。

选项式下发如下:

javascript 复制代码
<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之后妈妈再也不怕我找不到相关逻辑代码了,并且挪动这块代码到别的文件,不需要重新组织代码,大大降低重构成本,大大提高代码的可阅读性。

组合式写法如下:

javascript 复制代码
<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代码示例 :

javascript 复制代码
<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代码示例:

javascript 复制代码
<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() 暴露的属性:

javascript 复制代码
<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>
  1. 使用<script setup></script>,推荐使用该方法,对于结合单文件组件使用的组合式 API,推荐通过 <script setup> 以获得更加简洁及符合人体工程学的语法
javascript 复制代码
<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>
相关推荐
yddddddy33 分钟前
css的基本知识
前端·css
昔人'35 分钟前
css `lh`单位
前端·css
Nan_Shu_6142 小时前
Web前端面试题(2)
前端
知识分享小能手2 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队3 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光4 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5204 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20504 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端4 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿4 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js