从Vue2到Vue3，重新学习这五个常用API

Vue3发布已经一年多了。从Vue2到Vue3是一个不小的升级，包括周边的生态。虽然大部分开发者还在使用Vue2，但是Vue3显然是Vue开发者未来必须面对的，而Vue不久前正式发布了Vue2.7.0，使得Vue2兼容Vue3API，这使得开发者无需升级就可以使用Vue3的开发方式项目到Vue3，这为Vue2开发者学习Vue3提供了一个很好的过渡路径。Vue3和Vue2之间最大的变化是组合API。除了组合API的引入，一些我们在Vue2上经常使用的东西，到了Vue3中也发生了不小的变化。本文将介绍一些从Vue2到Vue3书中的几个重要和常用的知识点，欢迎有兴趣的同学阅读。本文代码示例使用setup语法糖+ts。1.v-model支持多个v-model在Vue3中，可以通过参数来实现一个组件支持多个v-models的能力。//父组件//子组件如果v-model不使用参数，它的默认值为modelValue，比如上面第一个v-model，注意此时不再像Vue2那样使用$emit('input')，但是统一使用update:xxx。放弃.sync在Vue2中，由于一个组件只支持一个v-model，当我们有另一个值，想要实现双向绑定更新时，我们往往会使用.sync修饰符来实现，而在Vue3中应该是这样的修饰符已被弃用，因为v-model可以支持多个，所以不需要.sync存在。2.watch不同数据类型的监控基本数据类型的监控：constname=ref('张三')watch(name,(newValue,oldValue)=>{console.log('watch===',newValue,oldValue)})复杂数据类型监控：interfaceUserInfo{name:stringage:number}constuserInfo=reactive({name:'张三',age:10})//监控整个对象watch(userInfo,(newValue,oldValue)=>{console.log('watchuserInfo',newValue,oldValue)})//监控一个属性watch(()=>userInfo.name,(newValue,oldValue)=>{console.log('watchname',newValue,oldValue)})支持监听多个源在Vue3中，watch多了一个特性，可以传入一个数组，同时监听多个数据，确实比Vue2更多，以前在Vue2中为了同时监控多个数据，往往需要使用computed。现在在Vue3中，我们可以减少一些不必要的代码。constname=ref('张三')constuserInfo=reactive({age:18})//同时监听name和userInfo的age属性watch([name,()=>userInfo.age],([newName,newAge],[oldName,oldAge])=>{//})3.watchEffectwatchEffect和watch的区别相对于Vue2，Vue3有了watchEffectAPI，watchEffect传入一个函数参数，函数会立即执行。同时，它会对最终函数中的因变量做出反应，并在依赖发生变化时重新运行该函数。constname=ref('张三')constage=ref(18)watchEffect(()=>{console.log(`${name.value}:${age.value}`)//张三:18})setTimeout(()=>{name.value='李四'//李四:18},3000)setTimeout(()=>{age.value=20//李四:20},5000)和watch：运行时机不同，watchEffect会立即执行，相当于设置了immediate:true的watch。watchEffect取不到变化前后的值。与watch显示的指定依赖源不同，watchEffect会自动收集依赖源。使用watchEffect还是watch？建议大部分时间使用watch，避免不必要的重复触发。4、在$attrsVue3中，$attrs包含了父组件中除props和自定义事件之外的所有属性集合。与Vue2不同，$attrs包含父组件事件，因此移除了$listenners。//父组件//子组件使用v-bind实现组件属性和事件透传：//父组件//子组件5.使用ref访问子组件在Vue2中，使用ref可以访问子组件中的任何数据和方法，但是在Vue3中，必须使用defineExpose来暴露子组件中的方法或属性，才能被父组件调用。