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
// 子组件
// 定义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
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包含了父组件的事件，云南idc服务商因此$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)
}
// 子组件
5. 使用ref访问子组件
在Vue2中，使用ref即可访问子组件里的任意数据及方法，但在Vue3中则必须使用defineExpose暴露子组件内的方法或属性才能被父组件所调用。