Vue3CompositionAPI

vue3.0在7月份发布了rc版本。vue-cli4.5之后还可以选择vue3作为备选版本进行体验。vue3正式版想必也不远了。我学不会了！！！！与vue2.0版本（OptionAPI）相比，CompositionAPI（组合API）是3.0的主要变化之一。概述CompositionAPI主要是受ReactHooks的启发，目的是让我们能够通过一套低侵入、函数式的API，更加灵活地“组合”组件的逻辑。示例``组合API，顾名思义，不再传入Data、mounted等参数，通过引入ref、onMounted等方法实现数据的双向绑定和生命周期函数的执行。为什么有必要？1、在组件复杂的情况下，逻辑代码可以组合在一起，不用强行用选项分开。这提高了代码质量的上限，降低了代码质量的下限。来自官方的一张对比图：2.更好的复用。在vue2中，想复用部分逻辑的代码是通过mixin进入的。但是mixin的内容其实很不直观，同名会被覆盖。使用组合API，因为所有的方法都是导入的，所以可以封装单一的逻辑。比如封装了发送验证码的倒计时功能。3.更好的打字稿支持。不会在Vue原型中增加很多内容，但是通过引入，类型定义会更加清晰。setupsetup是vue的一个新选项，是在组件中使用CompositionAPI的入口。setup在创建vue组件实例并完成props的初始化后执行。因为setup会在解析optionapi之前被调用，所以setup中的this会和options中的完全不同。为避免混淆，在设置中不使用它。同时，setup返回的值可以在模板和其他选项中使用。从设计的角度来看，Vue正式完成了设置中的所有内容。设置的返回值连接到模板模板和方法。由于ref和reactive不传入数据，因此需要vue暴露的函数ref或reactive来创建和监控数据的响应。两者有区别，ref用于基本赋值类型的数据，reactive用于引用类型的数据。其中，基本赋值类型的值需要在setup方法中通过.value的方式获取和修改。因为如果返回赋值类型的值，数据的双重绑定就会丢失。但在模板中，直接访问是可能的。computed与watch脚本语言=“ts">import{defineComponent,ref,computed,watchEffect,watch}from'vue';exportdefaultdefineComponent({name:'App',setup(){constcount=ref(0)watch(count,()=>{//如果有多个，则作为数组传入[count,count1]console.log('watch',count.value)})watchEffect(()=>{console.log('watchEffect',count.value)})constaddCount=()=>{count.value++}constdoubleCount=computed(()=>{returncount.value*2})return{count,doubleCount,addCount}}});watch与watchEffect的区别是watchEffect会立即执行，执行过程中读取的响应数据会被观察，watch只有在watch对象发生变化时才会执行。生命周期beforeCreate->使用setup()created->使用setup()beforeMount->onBeforeMountmounted->onMountedbeforeUpdate->onBeforeUpdateupdated->onUpdatedbeforeDestroy->onBeforeUnmountdestroyed->onUnmountedderrorCaptured->onErrorCaptured