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支持多根节点模板FragmentTeleport可将组件渲染到DOM任意位置teleport to#modal div classmodal内容/div /teleport新组件与APISuspense处理异步组件加载状态Suspense template #defaultAsyncComponent //template template #fallbackdivLoading.../div/template /Suspensev-model增强支持多个v-model绑定ChildComponent v-model:titletitle v-model:contentcontent /复制插入TypeScript集成完整的TS类型推断组件props可通过defineProps进行类型声明const props defineProps{ id: number title?: string }()其他改进自定义渲染器API如构建跨平台应用全局API改为应用实例调用createApp()事件总线替代方案mitt等第三方库style scoped现在支持深度选择器::v-deep