Vue2到Vue3，重学这五个常用的API

距离Vue3发布已经过去一年多时间了，到的从Vue2到Vue3是常用一个不小的升级，包括周边生态等。到的虽然目前大多数开发者们在使用的常用仍旧以Vue2为准，但Vue3显然是到的Vue开发者们未来必须面对的，而且前不久Vue官方也发布了Vue2.7.0，常用使得Vue2可以兼容Vue3的到的API，这让开发者可以在项目不升级Vue3的常用情况下依旧可以使用Vue3的开发方式，这为Vue2开发者学习Vue3提供了一个非常好的到的过渡途径。

Vue3之于Vue2最大的常用变化，当属composition API​了，到的而除了引入composition API外，常用一些我们在Vue2上经常使用的到的东西到了Vue3时也发生了不小的变化，本文将介绍一些有Vue2到Vue3中几个比较重要且常用的常用知识点，服务器托管欢迎感兴趣的到的同学阅读。

文中代码示例使用setup语法糖 + ts。

1. v-model

支持多个v-model

在Vue3​中，可以通过参数来达到一个组件支持多个v-model的能力。

// 父组件

姓名：{ { name }}

邮箱：{ { email }}

import child from ./child.vue

import { ref } from vue

const name = ref(张三)

const email = ref(666@qq.com)

// 子组件

// 定义emit

const emits = defineEmits<{

(e: update:modelValue, value: string): void

(e: update:email, value: string): void

}>()

const updateName = () => {

emits(update:modelValue, 李四)

}

const updateEmail = () => {

emits(update:email, 123456@qq.com)

}

</script>

如果v-model​没有使用参数，则其默认值为modelValue​，如上面的第一个v-model​，注意此时不再是像Vue2那样使用$emit(input)​了，而是统一使用update:xxx的方式。

废弃.sync

在Vue2中，由于一个组件只支持一个v-model​，当我们还有另外的值也想要实现双向绑定更新时，往往用.sync​修饰符来实现，而在Vue3中该修饰符已被废弃，因为v-model​可以支持多个，所以.sync也就没有存在的必要了。

2. watch

不同数据类型的监听

基础数据类型的监听：

const name = ref(张三)

watch(name, (newValue, oldValue) => {

console.log(watch===, newValue, oldValue)

})

复杂数据类型的监听：

interface UserInfo {

name: string

age: number

}

const userInfo = reactive({

name: 张三,

age: 10

})

// 监听整个对象

watch(userInfo, (newValue, oldValue) => {

console.log(watch userInfo, newValue, oldValue)

})

// 监听某个属性

watch(() => userInfo.name, (newValue, oldValue) => {

console.log(watch name, newValue, oldValue)

})支持监听多个源

在Vue3​里，watch​多了一个特性，可以传入一个数组同时侦听多个数据，这比起Vue2​确实优雅多了，以往在Vue2中为了实现同时监听多个数据，源码下载往往需要借助computed，现在在Vue3里我们可以少一些不必要的代码了。

const name = ref(张三)

const userInfo = reactive({

age: 18

})

// 同时监听name和userInfo的age属性

watch([name, () => userInfo.age], ([newName, newAge], [oldName, oldAge]) => {

//

})

3. watchEffect

watchEffect与watch的区别

相比Vue2，Vue3多了watchEffect​这个API，watchEffect传入一个函数参数，该函数会立即执行，同时会响应式的最终函数内的依赖变量，并在依赖发生改变时重新运行改函数。

const name = ref(张三)

const age = 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. $attrs

Vue3中，$attrs包含父组件中除props和自定义事件外的所有属性集合。

不同于Vue2，$attrs​包含了父组件的事件，亿华云计算因此$listenners则被移除了。

// 父组件

const getData = () => {

console.log(log)

}

// 子组件

hello：{ { props.name }}

export default {

inheritAttrs: false

}

const props = defineProps([name])

const attrs = useAttrs()

console.log(attrs, attrs)

</script>

使用v-bind即可实现组件属性及事件透传：

// 父组件

const onClose = () => {

console.log(close)

}

// 子组件

标签

</template>

5. 使用​​ref​​访问子组件

在Vue2​中，使用ref​即可访问子组件里的任意数据及方法，但在Vue3​中则必须使用defineExpose暴露子组件内的方法或属性才能被父组件所调用。