原副标题：Vue2 到 Vue3，徐广这 5 个常见的 API
↓所推荐高度关注↓
译者：中学生study
距Vue3正式发布早已往后两年多天数了，从Vue2到Vue3是两个十分大的升级换代，主要包括邻近自然生态等。
尽管现阶段绝大多数开发人员们在采用的依然以 Vue2 为依据，但Vue3或许是Vue开发人员们今后要直面的，所以不久前Vue非官方也正式发布了Vue2.7.0，使Vue2能相容Vue3的API，这让开发人员能在工程项目不升级换代Vue3的情况下依然能采用Vue3的Attichy，这为Vue2开发人员自学Vue3提供更多了两个十分好的过渡阶段有效途径。
Vue3之于Vue2最小的变动，要数 composition API 了，而除导入 composition API 外，许多他们在Vue2上时常采用的小东西到了Vue3时也出现了十分大的变动，责任编辑将如是说许多有Vue2到Vue3中两个较为关键且常见的习题，热烈欢迎钟爱的老师写作。
该文标识符实例采用 setup句法糖 + ts
v-model 全力支持数个v-model在 Vue3 中，能透过模块来达至两个模块全力支持数个 v-model 的潜能。
// 父模块
<template>
< childv-model= “name”v-model:email= “email”/>
< p> 联系电话：{{ name }} </ p>
< p> 邮箱：{{ email }} </ p>
< /template>
< lang=”ts” setup>
import child from ./ child.vue
import { ref } from vue
const name = ref<string>( 张三 )
const email = ref<string>(666@qq.com )
</>
// 子模块
<template>
<button @click= “updateName”>更新name</button>
<button @click= “updateEmail”>更新email</button>
</template>
< lang= “ts”setup>
// 定义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)
}
</>
如果 v-model 没有采用模块，则其默认值为 modelValue ，如上面的第两个 v-model ，注意此时不再是像Vue2那样采用 $emit(input) 了，而是统一采用 update:xxx 的方式。
废弃 .sync
在Vue2中，由于两个模块只全力支持两个 v-model ，当他们还有另外的值也想要实现双向绑定更新时，往往用 .sync 修饰符来实现，而在Vue3中该修饰符已被废弃，因为 v-model 能全力支持数个，所以 .sync 也就没有存在的必要了。
watch不同数据类型的监听
基础数据类型的监听：
constname = ref<string>( 张三)
watch(name, (newValue, oldValue) => {
console.log( watch===, newValue, oldValue)
})
复杂数据类型的监听：
interface UserInfo {
name: string
age: number
}
constuserInfo = reactive<UserInfo>({
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里他们能少许多不必要的标识符了。
constname = ref<string>(张三)
constuserInfo = reactive({
age: 18
})
// 同时监听name和userInfo的age属性
watch([name, => userInfo.age], ([newName, newAge], [oldName, oldAge]) => {
//
})
watchEffectwatchEffect与watch的区别
相比 Vue2 ， Vue3多 了 watchEffect 那个API， watchEffect 传入两个函数模块，该函数会立即执行，同时会响应式的最终函数内的依赖变量，并在依赖出现改变时重新运行改函数。
constname = ref<string>(张三)
constage = ref<number>( 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 。
与 watch 显示的指定依赖源不同， watchEffect 会自动收集依赖源。
用 watchEffect 还是 watch ？建议在大部分天数里采用 watch ，避免许多不必要的重复触发。
$attrs
Vue3中， $attrs 包含父模块中除props和自定义事件外的所有属性集合。
不同于 Vue2 ， $attrs 包含了父模块的事件，因此 $listenners 则被移除。
// 父模块
<template>
< childid= “root”class= “test”name= “张三”@ confirm= “getData”/>
< /template>
< lang=”ts” setup>
const getData = => {
console.log(log)
}
</ >
// 子模块
< template>
< div>
< span> hello：{{ props.name }} </ span>
</ div>
</ template>
< lang= “ts”>
exportdefault{
inheritAttrs: false
}
</ >
< lang= “ts”setup>
constprops = defineProps([ name])
constattrs = useAttrs
console.log( attrs, attrs)
</ >
采用 v-bind 即可实现模块属性及事件透传：
// 父模块
<template>
< childcloseable@ close= “onClose”/>
</template>
< lang=”ts” setup>
const onClose = => {
console.log(close)
}
</ >
// 子模块
< template>
< div>
< el-tagv-bind= “attrs”> 标签 </ el-tag>
</ div>
</ template>
采用 ref 访问子模块
在 Vue2 中，采用 ref 即可访问子模块里的任意数据及方法，但在 Vue3 中则要使用 defineExpose 暴露子模块内的方法或属性才能被父模块所调用。
// 父模块
<template>
< childref= “childRef”/>
< /template>
< lang=”ts” setup>
import { ref, onMounted } from vue
const childRef = ref
onMounted( => {
childRef.value.getData
})
</ >
// 子模块
< lang= “ts”setup>
import{ defineExpose } fromvue
constgetData = => {
console.log( getData)
}
constname = ref(张三)
defineExpose({
getData,
name
})
</ >
– EOF –
点击副标题可跳转
1、 一文掌握 vue3.2 setup 句法糖
2、 微软为 Vue.js 推出 Power BI 模块
3、 面试官问：Vue3 对比 Vue2 有哪些变动？
↓所推荐高度关注↓
「大前端技术之路」分享 Web前端，Node.js、React Native等大前端技术栈精选
点赞和在看就是最小的全力支持❤️
