Vue3 Composition API

开发
Composition API 主要灵感来源于React Hooks,目的是通过一组低侵入式的、函数式的 API,使得我们能够更灵活地「 组合 」组件的逻辑。

 示例

  1. <template> 
  2.   <div>{{count}}</div> 
  3.   <button @click="addCount">添加</button> 
  4. </template> 
  5.  
  6. <script lang="ts"
  7. import { defineComponent, ref, onMounted } from 'vue'
  8.  
  9. export default defineComponent({ 
  10.   name'App'
  11.   setup () { 
  12.     const count = ref(0) 
  13.     const getCount = () => { 
  14.       count.value = Math.floor(Math.random() * 10) 
  15.     } 
  16.     const addCount = () => { 
  17.       count.value++ 
  18.     } 
  19.     onMounted(() => { 
  20.       getCount() 
  21.     }) 
  22.  
  23.     return { 
  24.       count
  25.       addCount 
  26.     } 
  27.   } 
  28. }); 
  29. </script> 

Composition API顾名思义就是不再传入data、mounted等参数,通过引入的ref、onMounted等方法实现数据的双向绑定、生命周期函数的执行。

为什么需要
在组件比较复杂的情况下,可以将逻辑代码合到一起去,而不会被option强行分隔。这提高了代码质量的上限,同时也拉低了代码质量的下限。来自官方的一张对比图:

2.更好的进行复用。

在vue2中,想要复用部分逻辑的代码,都是通过mixin进去。但mixin进去的内容实际上很不直观,而且相同命名会被覆盖。而通过composition API,因为所有的方法都是引入的,可以将单独某个逻辑进行封装。例如对发送验证码倒计时功能进行封装。

  1. <template> 
  2.   <input type="number" placeholder="请输入验证码"
  3.   <button v-if="count">{{count}}秒后可重新发送</button> 
  4.   <button v-else @click="startCount">发送验证码</button> 
  5. </template> 
  6.  
  7. <script lang="ts"
  8. import { defineComponent, ref, reactive } from 'vue'
  9.  
  10. const userCountDown = () => { 
  11.   const count = ref(0) 
  12.   const countDown = (num: number) => { 
  13.     count.value = num 
  14.     num-- 
  15.     if (num > 0) { 
  16.       setTimeout(() => { 
  17.         countDown(num) 
  18.       }, 1000) 
  19.     } 
  20.   } 
  21.   const startCount = () => { 
  22.     // get verifyCode 
  23.     countDown(60) 
  24.   } 
  25.  
  26.   return { count, startCount } 
  27.  
  28. export default defineComponent({ 
  29.   name'Home'
  30.   setup () { 
  31.     const { count, startCount } = userCountDown() 
  32.     return { count, startCount } 
  33.   } 
  34. }); 
  35. </script> 

3.更好的typescript支持。不会再往vue原型上添加很多内容,而是通过引入的方式,类型定义会更清晰。

setup
setup是vue新增的一个选项,它是组件内使用Composition API的入口。setup是在创建vue组件实例并完成props的初始化之后执行。因为setup会在option api解析之前被调用,所以setup中的this会与options中得完全不一样。为了避免混乱,在setup中不使用this。同时setup返回的值,可以在模板和其他option中使用。从设计上来说,vue官方是将所有的事情在setup里完成。setup返回值连接的是template模板与方法。

ref、reactive
既然不在传入data,那么将数据创建和监听响应式就需要通过vue暴露出来的功能 ref或reactive。两者有所区别,ref用于基础赋值类型的数据,而reactive用于引用类型的数据。

其中基础赋值类型的值,在setup方法中,需要用 .value的方式进行获取和修改。因为赋值类型的值如果return出去返回值,就失去了数据的双绑定。但是在template中,可以进行直接访问。

  1. <template> 
  2.   <div>{{count}} 
  3.     <button @click="changeCount">添加</button> 
  4.   </div> 
  5.   <div>学生的姓名是:{{student.name}}</div> 
  6.   <div>学生的年龄是:{{student.age}} 
  7.     <button @click="changeStudentAge(20)">添加</button> 
  8.   </div> 
  9. </template> 
  10.  
  11. <script lang="ts"
  12. import { defineComponent, ref, reactive } from 'vue'
  13.  
  14. export default defineComponent({ 
  15.   name'Home'
  16.   setup () { 
  17.     const count = ref(0) 
  18.     const changeCount = () => { 
  19.       count.value = count.value + 1 
  20.     } 
  21.     const student = reactive({ 
  22.       name'Bob'
  23.       age: 12 
  24.     }) 
  25.     const changeStudentAge = (age: number) => { 
  26.       student.age = age 
  27.     } 
  28.     return { 
  29.       count
  30.       changeCount, 
  31.       student, 
  32.       changeStudentAge 
  33.     } 
  34.   } 
  35. }); 
  36. </script> 

computed与watch

  1. <template> 
  2.   <div>{{count}}</div> 
  3.   <div>{{doubleCount}}</div> 
  4.   <button @click="addCount">添加</button> 
  5. </template> 
  6.  
  7. <script lang="ts"
  8. import { defineComponent, ref, computed, watchEffect, watch } from 'vue'
  9.  
  10. export default defineComponent({ 
  11.   name'App'
  12.   setup () { 
  13.     const count = ref(0) 
  14.     watch(count, () => { // 如多个则用数组的方式传入[count, count1] 
  15.       console.log('watch'count.value) 
  16.     }) 
  17.     watchEffect(() => { 
  18.       console.log('watchEffect'count.value) 
  19.     }) 
  20.     const addCount = () => { 
  21.       count.value++ 
  22.     } 
  23.     const doubleCount = computed(() => { 
  24.       return count.value * 2 
  25.     }) 
  26.     return { 
  27.       count
  28.       doubleCount, 
  29.       addCount 
  30.     } 
  31.   } 
  32. }); 
  33. </script> 

watch与watchEffect的差别是,watchEffect会立马执行,执行中被读取的响应式 数据会被观测。而watch只有在watch对象有变化时才会执行。

生命周期

  1. beforeCreate -> 使用 setup() 
  2. created -> 使用 setup() 
  3. beforeMount -> onBeforeMount 
  4. mounted -> onMounted 
  5. beforeUpdate -> onBeforeUpdate 
  6. updated -> onUpdated 
  7. beforeDestroy -> onBeforeUnmount 
  8. destroyed -> onUnmounted 
  9. errorCaptured -> onErrorCaptured 

 

 

责任编辑:姜华 来源: 晨曦大前端
相关推荐

2024-03-01 11:32:22

Vue3APIVue.js

2021-08-11 08:31:42

前端技术Vue3

2021-12-16 08:27:54

Vue3 插件Vue应用

2021-12-01 08:11:44

Vue3 插件Vue应用

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2022-06-13 08:39:21

Vue3API

2021-07-29 12:05:18

Vue3Api前端

2022-07-13 10:07:31

vue3组件监听器

2024-01-04 08:38:21

Vue3API慎用

2021-12-02 05:50:35

Vue3 插件Vue应用

2021-05-26 10:40:28

Vue3TypeScript前端

2021-11-16 08:50:29

Vue3 插件Vue应用

2022-03-10 11:04:04

Vue3Canvas前端

2021-12-08 09:09:33

Vue 3 Computed Vue2

2022-07-11 10:01:23

Vue 3前端

2020-09-29 08:26:17

Vue3中新增的API

2021-09-26 00:24:58

开发项目TypeScript

2022-06-21 12:09:18

Vue差异

2024-01-16 12:46:00

Vue3API开发
点赞
收藏

51CTO技术栈公众号