vue3.0在7月发布了rc版本,vue-cli4.5后也支持选择vue3作为备选版本可以体验了,vue3的正式版本相必也不远了。学不动了呀!!!!
相比vue2.0版本(Option API),Composition API(组合API)算是3.0的重大变更之一了。

概述

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强行分隔。这提高了代码质量的上限,同时也拉低了代码质量的下限。来自官方的一张对比图:

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的使用简介的详细内容,更多关于Vue3 Composition API的使用的资料请关注乐虎体育其它相关文章!

Vue3 Composition API的使用的更多相关文章

  1. Vue3 Composition API的使用

    vue3.0在7月发布了rc版本,vue-cli4.5后也支持选择vue3作为备选版本可以体验了,vue3的正式版本相必也不远了。学不动了呀!!!!相比vue2.0版本(Option API),Composition API(组合API)算是3.0的重大变更之一了。概述Composition API......

  2. Vue启动index.html如何被渲染的

    第一步:cmd进入项目文件里,运行npm run serve 启动项目 这里说明启动端口号是8080第二步:往页面输入:localhost:8081二、解析渲染步骤 先看整体框架样式和index.html:<!DOCTYPE html><html lang......

  3. vue中data改变后让视图同步更新的方法

    前言不久前天看到一个比较有趣的问题,vue中data改变后,如何让视图同步更新,搜索了一下,并没有发现解决问题的方法,只能从源码去找解决方法了。原因我们都知道,在vue中改变数据后,视图并不是同步更新的。在vue实例初始化后,会将data设置为响应式对象,当我们执行this.xxx = 1时,会触发......

  4. Vue中组件间通信的方式

    Vue中组件间通信的方式Vue中组件间通信包括父子组件、兄弟组件、隔代组件之间通信。props $emit这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组件,而子组件并不能通过修改prop......

  5. VUE 3.0 初体验之路

    码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14394057.html在2020年9月中旬,vue.js发布了3.0正式版,在不久的将来,VUE3.0 也终将成为大前端的必然趋势,环境搭建node 版本要求: Node.js8.9 ......

  6. vue使用transition组件动画效果的实例代码

    transition文档地址定义一个背景弹出层实现淡入淡出效果Toggle helloexport default {data: () => ({show: true}),};.fadeBg-enter-active,.fadeBg-leave-active {transition: opa......

  7. 关于Vue v-model你需要知道的一切

    v-model是Vue的一个指令,它提供了input和form数据之间或两个组件之间的双向数据绑定。这在Vue开发中是一个简单的概念,但是v-model的真正威力需要一些时间才能理解。到本教程结束时,你将了解v-model的所有不同用例,并学习如何在自己的项目中使用它。准备好了吗?我也是。让我们编写......

  8. vue3常用的API

    vue3.x已经发布了这么久,相关的生态也慢慢起来了,包括vite这个新的打包工具,在vue3.0学习过程中有一些实用性的api对比,希望能在开发中给大家做个示范,准确的使用对应的api去完成我们的项目开发生命周期的变更要特别说明一下的就是,setup 函数代替了 beforeCreate 和 cr......

  9. vue 组件基础知识总结

    组件基础1 组件的复用组件是可复用的Vue实例。// 定义一个名为 button-counter 的新组件Vue.component('button-counter', {data: function () {return {count: 0}},template: '点击了 {{ count }}......

  10. Vue 重置data的数据为初始状态操作

    在某些情况下,需要重新使用data中的数据,但是data中的数据已经被各种表单、变量等赋值,那么怎么重置data的值呢?1. 逐个赋值...data() {return {name: '',sex: '',desc: ''}}...// 逐个赋值this.name = ''this.sex = ''......

随机推荐

  1. MySql8 WITH RECURSIVE递归查询父子集的方法

    背景开发过程中遇到类似评论的功能是,需要时用查询所有评论的子集。不同数据库中实现方式也不同,本文使用Mysql数据库,版本为8.0Oracle数据库中可使用START [Param] CONNECT BY PRIORMysql 中需要使用 WITH RECURSIVE需求找到name为张三的孩子和孙......

  2. Python爬虫-抓取手机APP数据

    抓取超级课程表话题数据。博文:http://my.oschina.net/jhao104/blog/606922#!/usr/local/bin/python2.7# -*- coding: utf8 -*-"""超级课程表话题抓取"""i......

  3. vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能

    一、准备工作下载vue-quill-editornpm install vue-quill-editor --save 或者 yarn add vue-quill-editor二、定义全局组件quill-editor下载好vue-quill-editor后,我们需要定义一个全局组件,把这个组件名字命......

  4. 用Python发一封图文并茂的邮件

    最近使用了不少通讯工具的接口, 比如企业微信机器人,钉钉,微信公众号的接口(未认证的订阅公众号),相对于邮件来说,它们的表现形式太弱。比如没有更丰富的版本方式。当然了,并不是说表现形式越棒就是约好的通知手段,这个依个人情况而定,而我恰恰需要比较丰富的表现形式,最终还是回到了邮件,邮件真香!而个人微信......

  5. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝一、事件委托首先呢,介绍一下事件绑定//方法一:通过onclick 点击 function clickEvent(){alert("点击事件");}//方法二:通过addEventListener 点击 var btn = doc......

  6. Java ArrayList使用总结

    提起ArrayList,相信很多小伙伴都用过,而且还不少用。但在几年之前,我在一场面试中,面试官要求说出ArrayList的扩容机制。很显然,那个时候的我并没有关注这些,从而错过了一次机会。不过好在我还算比较喜欢搞事情的,所以今天这篇文章也算是填坑吧。看完这边文章你将了解到:ArrayList底层实......

  7. Linux中让终端输入变为非阻塞的三种方法

    介绍在linux下每打开一个终端,系统自动的就打开了三个文件,它们的文件描述符分别为0,1,2,功能分别是“标准输入”、“标准输出”和“标准错误输出”,同时对应了三个文件流指针,分别是stdin,stdout和stderr。三个文件描述符定义了对应的宏,分别为STDIN_FILENO,STDOUT_......

  8. 详解用 python-docx 创建浮动图片

    相信大家对python-docx这个常用的操作docx文档的库都不陌生,它支持以内联形状(Inline Shape)的形式插入图片,即图片和文本之间没有重叠,遵循流动版式(flow layout)。但是,截至最新的0.8.10版本,python-docx尚不支持插入浮动图片(floating pic......

  9. nodejs中的文件系统

    、目录简介nodejs中的文件系统模块Promise版本的fs文件描述符fs.stat文件状态信息fs的文件读写fs的文件夹操作path操作简介nodejs使用了异步IO来提升服务端的处理效率。而IO中一个非常重要的方面就是文件IO。今天我们会详细介绍一下nodejs中的文件系统和IO操作。node......

  10. java ArrayBlockingQueue的方法及缺点分析

    提到ArrayBlockingQueue的方法,想必大家都不陌生,我们在入队和出队的时候,接触了不少这方面的函数。当然ArrayBlockingQueue中的方法也不止于此,今天我们就全部为大家罗列出来,也算是做一个学习方向上的指引。然后就其中的peek方法带来实例介绍,并说明ArrayBlocki......