一.架构设计差异
1.响应式系统重构
- Vue2：基于defineProperty实现
- Vue3： 基于Proxy实现
- Proxy的优势：
- 动态监测属性的添加或删除
- 更好的数组支持
- 性能更好
2.虚拟DOM的优化
- Vue3引入PatchFlag标记动态节点
- 编译时静态提升
- 事件缓存
二.Composition API和Option API对比
- 逻辑复用：组合式API更灵活，类似（React Hooks），替代mixins
- 类型支持： 更好的TypeScript支持
- 代码组织：按功能而非选项组织代码
三.性能优化
- 打包体积减少
- 渲染性能提升
- 模板编译优化
四.更好的Typescript支持
五.生命周期变化
| Vue2 | Vue3 |
|---|---|
| beforeCreate() | setup() |
| created() | setup() |
| beforeMount() | onBeforeMount() |
| mounted() | onMounted() |
| beforeUpdate() | onUpdate() |
| updated() | onUpdated() |
| beforeDestroy() | onBeforeUnmount() |
| destroyed() | onUnmounted() |
