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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 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中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python中的字典详细介绍
2014/09/18 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python实现五子棋小游戏
2020/03/25 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Python守护进程实现过程详解
2020/02/10 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
应届生程序员求职信
2013/11/05 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
档案接收函
2014/01/13 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
政风行风评议整改方案
2014/09/15 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
护理工作心得体会
2016/01/22 职场文书