Vue3 Composition API的使用简介

相比vue2.0版本(Option API),Composition API(组合API)算是3.0的重大变更之一了。

Posted in Vue.js onMarch 29, 2021

概述

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

示例

<template>
 <div>{{count}}</div>
 <button @click="addCount">添加</button>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
 
export default defineComponent({
 name: 'App',
 setup () {
  const count = ref(0)
  const getCount = () => {
   count.value = Math.floor(Math.random() * 10)
  }
  const addCount = () => {
   count.value++
  }
  onMounted(() => {
   getCount()
  })
 
  return {
   count,
   addCount
  }
 }
});
</script>

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

为什么需要

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

Vue3 Composition API的使用简介

2.更好的进行复用。

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

<template>
 <input type="number" placeholder="请输入验证码">
 <button v-if="count">{{count}}秒后可重新发送</button>
 <button v-else @click="startCount">发送验证码</button>
</template>
 
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
 
const userCountDown = () => {
 const count = ref(0)
 const countDown = (num: number) => {
  count.value = num
  num--
  if (num > 0) {
   setTimeout(() => {
    countDown(num)
   }, 1000)
  }
 }
 const startCount = () => {
  // get verifyCode
  countDown(60)
 }
 
 return { count, startCount }
}
 
export default defineComponent({
 name: 'Home',
 setup () {
  const { count, startCount } = userCountDown()
  return { count, startCount }
 }
});
</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中,可以进行直接访问。

<template>
 <div>{{count}}
  <button @click="changeCount">添加</button>
 </div>
 <div>学生的姓名是:{{student.name}}</div>
 <div>学生的年龄是:{{student.age}}
  <button @click="changeStudentAge(20)">添加</button>
 </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
 
export default defineComponent({
 name: 'Home',
 setup () {
  const count = ref(0)
  const changeCount = () => {
   count.value = count.value + 1
  }
  const student = reactive({
   name: 'Bob',
   age: 12
  })
  const changeStudentAge = (age: number) => {
   student.age = age
  }
  return {
   count,
   changeCount,
   student,
   changeStudentAge
  }
 }
});
</script>

computed与watch

<template>
 <div>{{count}}</div>
 <div>{{doubleCount}}</div>
 <button @click="addCount">添加</button>
</template>
 
<script lang="ts">
import { defineComponent, ref, computed, watchEffect, watch } from 'vue';
 
export default defineComponent({
 name: 'App',
 setup () {
  const count = ref(0)
  watch(count, () => { // 如多个则用数组的方式传入[count, count1]
   console.log('watch', count.value)
  })
  watchEffect(() => {
   console.log('watchEffect', count.value)
  })
  const addCount = () => {
   count.value++
  }
  const doubleCount = computed(() => {
   return count.value * 2
  })
  return {
   count,
   doubleCount,
   addCount
  }
 }
});
</script>

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

生命周期

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

以上就是Vue3 Composition API的使用简介的详细内容。

Vue.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue+django实现下载文件的示例
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
vue实现倒计时功能
Mar 24 #Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
You might like
php实现的mongodb操作类实例
2015/04/03 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
js里面的变量范围分享
2020/07/18 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python psutil监控进程实例
2019/12/17 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
给国外客户的邀请函
2014/01/30 职场文书
法律进学校实施方案
2014/03/15 职场文书
面试通知邮件
2015/04/20 职场文书
故意伤害辩护词
2015/05/21 职场文书
python_tkinter事件类型详情
2022/03/20 Python