Vue3知识点总结
Vue3 核心特性
Composition API
替代Options API的逻辑组织方式，通过setup()函数实现逻辑复用。核心方法包括ref（响应式基础类型）、reactive（响应式对象）、computed（计算属性）和watch（侦听器）。
import { ref, computed } from 'vue' setup() { const count = ref(0) const double = computed(() => count.value * 2) return { count, double } }响应式系统升级
基于Proxy重构响应式机制，支持Map/Set等集合类型。性能优化通过依赖收集层级化实现，减少不必要的组件更新。
生命周期变化
beforeCreate/created被setup()替代- 生命周期钩子前缀改为
on，如onMounted、onUpdated - 新增调试钩子
onRenderTracked和onRenderTriggered
性能优化
Tree-shaking支持
按需引入API，未使用的功能不会打包到最终产物。例如：
import { nextTick } from 'vue' // 仅引入所需模块Fragment与Teleport
支持多根节点模板（Fragment），<Teleport>可将组件渲染到DOM任意位置：
<teleport to="#modal"> <div class="modal">内容</div> </teleport>新组件与API
Suspense
处理异步组件加载状态：
<Suspense> <template #default><AsyncComponent /></template> <template #fallback><div>Loading...</div></template> </Suspense>v-model增强
支持多个v-model绑定：
<ChildComponent v-model:title="title" v-model:content="content" />复制插入
TypeScript集成
- 完整的TS类型推断
- 组件props可通过
defineProps进行类型声明：
const props = defineProps<{ id: number title?: string }>()其他改进
- 自定义渲染器API（如构建跨平台应用）
- 全局API改为应用实例调用（
createApp()） - 事件总线替代方案：
mitt等第三方库 <style scoped>现在支持深度选择器::v-deep