[TOC] ## 模板 | 概念 | 作用 | 用法 | | --------- | ------------------------ |----------------| |模板引用 |在模板上使用 ref 属性为节点添加引用信息| `<input ref="input">` | |解构插槽名 | 将具名插槽的 prop 解构为变量| `<template v-slot:{slotName}>` | |动态插槽名 | v-slot 接受动态的参数 | `<template v-slot:[dynamicSlotName]>`| |缩写插槽语法| # 是 v-slot 的缩写 |`<template #my-slot> </template> 等同于 <template v-slot:my-slot>`| | v-model 修饰符| .lazy .trim .number 等| `<input v-model.lazy="msg">`| |异步组件 | resolve 选项的工厂函数会异步解析组件定义 | `Vue.component('async-example', () => Promise.resolve({/* 组件定义对象 */}))`| |Teleport | 实现内容分发,将内容移动到指定位置| `<teleport to="body"><p>`我会出现在body中`</p></teleport>` | |Suspense | 用于异步数据/组件的加载过程,在数据/组件准备就绪之前显示 fallback 内容。|`<Suspense> <template #default> <AsyncComponent/> </template> <template #fallback>加载中...</template> </Suspense>`| |Composition API| Vue3 更加灵活的组件实现选项|`setup(){ const count = ref(0) }<br> template: '<p>{{count}}</p>'`| |Emits |申明组件可触发(emit)的事件|`<MyComponent :foo="bar" @heard="onHeard" emits="heard"/>` | |新增内置组件|Fragment、Teleport、Suspense 等| `<Suspense><template #default>< AsyncComponent /></template></Suspense>`| |继承自 VNode|Vue3 中的所有节点、组件实例都继承自 VNode 接口|`type VNode = {<br> tag?: string | Component<br> props?: Props<br> children?: VNode[]<br>}`| > 在 Vue3 中使用新特性的过程: 1. 在模板中使用 Composition API(如 ref 或 reactive)或新的内置组件(如 Suspense 和 Teleport)。 2. 使用 emits 选项申明组件可触发的事件。 3. 在模板上使用 ref 为节点添加引用信息。 4. 使用 v-model 修饰符(如 .lazy)调整 v-model 的绑定语法。 5. 使用动态插槽名或缩写插槽语法(#)在模板中使用插槽。 6. 使用异步组件选项定义异步解析的组件。 Vue3 对模板、组件和功能都进行了升级,提供许多新特性,值得我们深入学习与运用。