Vue3有了解过吗?能说说跟Vue2的区别吗?
参考答案:
Vue 3 是对 Vue 2 的架构级升级,其核心改进体现在以下几个方面:
响应式系统重构
实现机制
Vue 2 使用 Object.defineProperty 实现响应式,存在无法检测属性新增/删除的限制。Vue 3 改用 Proxy 代理,实现了真正的全属性响应追踪,同时提升了性能表现。依赖追踪优化
引入 effect scope 概念,支持更细粒度的依赖收集。与 Vue 2 的 Watcher 实例相比,Vue 3 的响应式系统内存占用降低约50%。
组合式 API
逻辑复用革新
Options API 的碎片化问题通过 setup() 和 Composition API 解决。相关逻辑可以聚合到独立 composable 函数中,实现比 mixins 更灵活且无冲突的复用方式。TypeScript 支持
基于函数式的 API 设计使类型推导更为自然,相比 Vue 2 的 Options API 获得了完整的类型支持。
性能优化
编译时改进
- 模板编译生成更高效的渲染函数(Block Tree 优化)
- 静态节点提升(Hoist Static)减少运行时开销
- Patch Flag 标记实现靶向更新
体积减少
通过 Tree-shaking 支持,最小化打包体积从 Vue 2 的 ~20KB 降至 ~10KB。
其他重要差异
生命周期调整
beforeDestroy 更名为 beforeUnmount,destroyed 改为 unmounted,与语义更匹配。Fragment/Teleport 支持
新增多根节点组件和跨 DOM 渲染能力,解决 Vue 2 的模板限制。自定义渲染器
提供 createRenderer API 实现非 DOM 环境的渲染能力,扩展性显著增强。
题目要点:
- Proxy 重构响应式系统解决 Vue 2 的响应式限制
- Composition API 提供更好的逻辑组织和复用
- 编译器优化带来显著的运行时性能提升
- 更友好的 TypeScript 集成体验
- 设计上更注重可维护性和扩展性