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在图片上传的时候压缩图片
Nov 18 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
Vue Mint UI mt-swipe的使用方式
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
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
php计算title标题相似比的方法
2015/07/29 PHP
PHP钩子实现方法解析
2019/05/21 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python之Socket网络编程详解
2016/09/29 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Python流程控制语句的深入讲解
2020/06/15 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
php优化查询foreach代码实例讲解
2021/03/24 PHP
高中军训感言400字
2014/02/24 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
团结演讲稿范文
2014/05/23 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
先进教师事迹材料
2014/12/16 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
如何利用React实现图片识别App
2022/02/18 Javascript