点选下方“开发人员黑叔”，优先选择“首页或是隆哥蒙”
你的高度关注象征意义关键性！
译者：王立发
https://zhuanlan.zhihu.com/p/267040951
Vue 3 的 Template 全力支持数个根条码，Vue 2 不全力支持Vue 3 有 createApp()，而 Vue 2 的是 new Vue()createApp(模块)，new Vue({template, render})v-model替代以前的v-model和.syncvue3中v-model的用语明确要求:
3.1. props特性名任一，假定为x
3.2. 该事件名要为”update:x”
效用：<Switch :value=“y”@update:value=“y=$event”/>
vue2中的读法
<Switch :value.sync=“y”/>
vue3中的读法
<Switch v-model:value=“y”/>
4. context.emit
新增context.emit，与this.$emit（vue3中只能在methods里采用）作用相同
context.emit用语import {SetupContext } from vuesetup(props: Prop,context: SetupContext) {
const toggle = () =>{
context.emit(input, !props.value)
}
return{toggle}
}
5. Vue3中的特性绑定
默认所有特性都绑定到根元素
采用inheritAttrs: false可以取消默认绑定
采用v-bing=”$attrs”批量绑定特性
采用 const {size, level, …rest} = context.attrs 将特性分开5.1 采用场景在vue2中我们在父模块绑定click该事件，子模块要内部触发click，而vue3中在父模块绑定子模块的根元素上也会跟着绑定
ButtonDemo.vue
<Button @click=“onClick” @focus=“onClick” size=“small”>你好</Button> </div>
setup() {
const onClick = () => {
console.log(“aaa”)
}
return {onClick}
},
Button.vue
<div> <button> <slot/> </button> </div></template>
上面的代码Button的click该事件会在根元素div上绑定，如果我们要指定click的区域为button元素的话我们就需要采用inheritAttrs
Button.vue
<div> <button v-bind=“$attrs”> <slot/> </button> </div></template>
export default {
inheritAttrs: false
}
</script>
如果想要一部分特性绑定在button上一部分在div上就需要在setup里
Button.vue
<div :size=“size”> <button v-bind=“rest”> <slot/> </button> </div></template>
import {SetupContext} from vue
export default {
inheritAttrs: false,
setup(props: any, context:SetupContext ) {
const {size, …rest} = context.attrs
return {size, rest}
}
}
</script>
6.slot具名插槽的采用
vue2中的用语
子模块父模块
哈哈哈
vue3中子模块用语不变，父模块需要采用v-slot:插槽名
父模块
哈哈哈
7. Teleport传送门模块
需要传送到body下面的内容
8. vue3中动态挂载模块的方法
通过引入h函数第一个参数是模块，第二个是元素的特性(第一个参数模块的props，也就是直接可以在采用模块的时候传入的属性)，第三个是插槽的特性。
其中我们在render里监听我们v-model绑定的update该事件的时候，需要采用onUpdate:特性名import {createApp, h} from vueimport Dialog from ./Dialog.vueexport const openDialog = (options: Options) =>{
const{title, content} = options
const div = document.createElement(div)
document.body.append(div)
constapp = createApp({
render() {
returnh(Dialog, {
visible: true, cancel: () =>{},
onUpdate:visible: (newValue: boolean) =>{
if (newValue === false) {
app.unmount(div)
}
}
}, {title, content})
}
})
app.mount(div)
}
在父模块的setUp里通过context.slots.default()拿到子模块数组，然后通过component模块渲染
比如：TabsDemo.vue<Tabs> <Tab title=“导航1”>内容1</Tab> <Tab title=“导航2”>内容2</Tab></Tabs>Tabs.vue
<component v-for=“(tab, index) in defaults” :key=“index” :is=“tab”></component></template>
import {SetupContext} from vue
export default {
setup(props, context: SetupContext) {
const defaults = context.slots.default()
return {
defaults
}
}
}
</script>
vue3中所有的模块最后都会导出一个对象这个对象就是我们的子模块里的type（context.slots.default()[0].type),所以我们可以通过type判断子模块是不是我们明确要求的子模块，以Tabs模块为例我们需要用户采用的时候下面的子模块全部都是我们的Tab模块
Tabs.vueimport Tab from ./Tab.vueexport default{
setup(props, context: SetupContext) {
constdefaults = context.slots.default()
defaults.forEach(tag =>{
if(tag.type !== Tab) {
throw new Error(Tabs 子条码要是 Tab)
}
})
return{
defaults
}
}
}
10. vue3中ref的采用
10.1.单个ref
import
{
onMounted,
ref,
} from vue;
export default{
setup() {
const headline = ref(null);
// Before the component is mounted, the value // of the ref is `null` which is the default // value weve specified above. onMounted(() =>{
// Logs: `Headline` console.log(headline.value.textContent);
});
return{
// It is important to return the ref, // otherwise it wont work.headline,
};
},
};
</script>
Headline
</h1>
<p>Lorem ipsum …</p> </div>
</template>
10.2. v-for里的ref
// el当前元素，divs是存储每个元素的数组 <div v-for=“(item, index) in list” :ref=“el => { divs[index] = el }”>{{ item }}
</div> </template>
import {
onMounted,
ref,
} from vue;
export default {
setup() {
const divs = ref([]);
onMounted(() => {
console.log(divs.value)
});
return {
divs
};
},
};
</script>
11. watchEffect用来替代生命周期里的onMounted和onUpdated
初始化页面的时候watchEffect里的代码会执行，当watchEffect里的数据有更新的时候同样会执行
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0setTimeout(() =>{
count.value++
// -> logs 1}, 100)
注意watchEffect第一次运行是在模块挂载之前，如果需要访问DOM需要将我们的watchEffect放在onMounted里
onMounted(() =>{
watchEffect(() => console.log(count.value))
})最后感谢阅读，欢迎分享给身边的朋友，
记得高度关注噢，黑叔带你飞！
亲，点这涨工资
