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-router定义元信息meta操作
Dec 07 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 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
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
js的一些常用方法小结
2011/06/29 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
详解python UDP 编程
2020/08/24 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
我未来的职业规划范文
2014/01/11 职场文书
群众路线剖析材料
2014/02/02 职场文书
一体化教学实施方案
2014/05/10 职场文书
公司活动总结范文
2014/07/01 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
干部个人考察材料
2014/12/24 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技