Vue3组合API

示例,ref,onMounted}from'vue';exportdefaultdefineComponent({name:'App',setup(){constcount=ref(0)constgetCount=()=>{count.value=Math.floor(Math.random()*10)}constaddCount=()=>{count.value++}onMounted(()=>{getCount()})return{count,addCount}}});CompositionAPI，顾名思义，不再导入data、Mounted等参数，通过ref、onMounted等方法的引入，实现数据的双向绑定和生命周期函数的执行。为什么组件比较复杂的时候还需要把逻辑代码组合在一起而不用选项强行分开。这提高了代码质量的上限，降低了代码质量的下限。来自官方的一张对比图：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的方式获取和修改。因为如果返回赋值类型的值，数据的双重绑定就会丢失。但在模板中，直接访问是可能的。计算并观看watch和watchEffect的区别在于watchEffect会立即执行，并且会观察执行过程中读取的响应数据，而watch只是当watch将执行对象更改。生命周期beforeCreate->usesetup()created->usesetup()beforeMount->onBeforeMountmounted->onMountedbeforeUpdate->onBeforeUpdateupdated->onUpdatedbeforeDestroy->onBeforeUnmountdestroyed->onUnmountedererrorCaptured->onErrorCaptured