Vue3全家桶升级指南1组合API

1、setup()vue3中组合API中最重要的就是setup方法，相当于组件的入口。所有组合API都必须在setup()中使用。setup在组件实例初始化（beforeCreated）之前执行，是整个组件的入口函数。此时数据和方法还没有挂载，所以在setup中，this不会执行当前组件实例，也无法通过this获取组件中的数据和方法。模板中使用的变量和方法必须在设置中返回才能使用。exportdefault{setup(){letname="张三"return{name}//必须返回这里才能在模板中使用}}setup中的参数上面已经讲过了，因为setup是在beforeCreate之前执行的，所以setup中的this并没有指向当前组件实例，this的值是undefined，那我们如何与父子组件进行通信呢（之前可以通过this.$emit来触发）？然后你需要使用设置的参数。setup有两个参数，第一个是props，父组件传递给当前组件的props都在这个参数对象中，第二个参数是context上下文，里面包含attrs，emit，slots，这些参数的用法和vue2中的类似，这里不再赘述。2.ref用于定义基本类型的响应式数据。设置中直接定义的变量没有响应。如果需要定义基础类型的响应式变量，需要使用ref定义import{ref}from"vue"exportdefault{setup(){letname='张三';setTimeout(()=>{name='李四';console.log(name);//这里的变化，但是视图不会更新},2000);返回{名称}；}}import{ref}from"vue"exportdefault{letname=ref('张三');setTimeout(()=>{name.value='李四';console.log(name.value);//李四},2000);return{name};}需要注意的是，ref定义的变量在js中使用时需要通过.value获取或设置值，而在template中使用时则不需要在Vue中添加.value，Vue有已经在内部为我们处理了。通过ref获取dom元素或组件实例在vue2中获取dom元素或组件实例，直接在dom元素或组件中添加ref="refName"，然后在js中通过this.$refs.refName获取。在vue3中，用法略有不同。直接在dom元素或组件中添加ref="refName"来定义setup中的ref，初始值为null，让refName=ref(null)，注意变量的名称必须和上面的ref名称一致dom或组件。在js中通过refName.value获取dom元素或组件实例。注意设置总返回中需要用到的ref变量3.Reactive用于定义响应式数据的引用类型import{reactive}from'vue';exportdefault{setup(){letobj=reactive({name:'张三',年龄：18});setTimeout(()=>{obj.name='李四';console.log(obj);//李四},2000);返回{对象}；},};在模板中，可以通过{{obj.name}}直接访问数据4.创建一个只读的计算属性Computedpropertyimport{ref,computed}from"vue"exportdefault{setup(){letcount=ref(0)让newCount=computed(()=>count.value+10)返回{count,newCount}}}创建一个可读可写的计算属性，在computed中传入一个对象，通过设置get和set方法创建一个可读可写的计算属性从'vue'导入{ref，计算}；exportdefault{setup(){letcount=ref(1);letnewCount=computed({get:()=>count.value+100,set:val=>(count.value=val-1),});letchange=()=>(newCount.value+=100);//对计算属性赋值会触发setreturn{count,newCount,change};},}5、watch监听监控单条ref类型的数据import{ref,computed,watch}from'vue';exportdefault{setup(){letcount=ref(1);letnewCount=computed({get:()=>count.value+100,set:val=>(count.value=val-1),});让change=()=>(newCount.value+=100);watch(count,(newVal,oldVal)=>{console.log(newVal,oldVal);});返回{计数，新计数，变化}；},};监控多个ref类型的值import{ref,watch}from'vue';exportdefault{setup(){letname=ref('张三');让年龄=参考（18）；设置超时（（）=>{name.value='李四';age.value=22;},2000);watch([name,age],([newName,newAge],[oldName,oldAge])=>{console.log(newName,newAge);//李四22console.log(oldName,oldAge);//张圣18});返回{姓名，年龄}；},};监控反应类型的单个值import{reactive,watch}from'vue';exportdefault{setup(){letobj=reactive({name:'张三',age:18});setTimeout(()=>{obj.name='李四';},2000);watch(()=>obj.name,(newVal,oldVal)=>{console.log(newVal,oldVal);//李四张三});返回{对象}；},};监控reactive类型的多个值import{reactive,watch}from'vue';exportdefault{setup(){letobj=reactive({name:'张三',age:18});setTimeout(()=>{obj.name='李四';obj.age=22;},2000);观看([()=>obj.name,()=>obj.age],([newName,newAge],[oldName,oldAge])=>{console.log(newName,newAge);//李四22console.log(oldName,oldAge);//张三18});返回{对象}；},};watch在vue2中添加配置项watch如果需要添加配置，需要传入一个对象来配置immediate和deep，在vue3中watch也可以在第三个参数中添加配置import{ref,watch}from'vue';exportdefault{setup(){letname=ref('张三');让年龄=参考（18）；setTimeout(()=>{name.value='Lisi';age.value=22;},2000);watch([name,age],([newName,newAge],[oldName,oldAge])=>{console.log(newName,newAge);console.log(oldName,oldAge);},{immediate:true,deep：真的，}）;返回{姓名，年龄}；},};6.watchEffect监控import{ref,watch,watchEffect}from'vue';出口默认lt{setup(){letname=ref('张三');让年龄=参考（18）；setTimeout(()=>{name.value='李四';age.value=22;},2000);watchEffect(()=>{console.log(name.value);console.log(age.value);});返回{姓名，年龄}；},};可以用一个变量接收watch或者watchEffect函数的返回值，然后在需要停止监听的地方调用这个匿名函数stop()关闭import{ref,watch,watchEffect}from'vue';exportdefault{setup(){letname=ref('张三');让年龄=参考（18）；setTimeout(()=>{name.value='李四';age.value=22;},2000);setTimeout(()=>{stop();//这里关闭监听后，4秒后不会打印任何信息name.value='Lisi2';age.value=222;},4000);让stop=watchEffect(()=>{console.log(name.value);console.log(age.value);});返回{姓名，年龄}；},};watchEffect和watchwatch的区别是默认是惰性的，只有当被监控的变量发生变化时才会执行，watchEffect不是惰性的，会在组件初始化时执行，变化时也会执行。watch需要指定监听的变量（ref和reactive变量的类型略有不同），watchEffect不需要指定，回调中使用的responsive变量会被监听，当这些变量被执行时会执行回调改变。watch变化时可以获取新值和旧值，watchEffect只能获取新值。