[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 對模板、組件和功能都進行了升級,提供許多新特性,值得我們深入學習與運用。