vue实现原理比较
Vue 2 的实现原理
Vue 2 的核心是通过 Object.defineProperty 实现数据劫持，结合发布-订阅模式实现响应式系统。每个组件实例对应一个 Watcher，当数据变化时触发 setter 通知 Watcher 更新。
响应式数据通过递归遍历 data 对象的属性，将其转换为 getter/setter。数组通过重写原型方法（如 push/pop）实现变更检测。模板编译将模板转换为渲染函数，通过虚拟 DOM 进行高效比对更新。
Vue 3 的实现原理
Vue 3 改用 Proxy 实现响应式，解决了 Vue 2 中无法检测新增属性、数组索引修改等限制。Proxy 直接代理整个对象，无需递归初始化，性能更优。
组合式 API 通过 setup 函数实现逻辑复用，替代了 Options API 的碎片化问题。编译器优化生成更高效的虚拟 DOM，引入静态提升（Hoisting）、Patch Flags 等机制减少运行时开销。
虚拟 DOM 差异
两者均使用虚拟 DOM，但 Vue 3 的编译策略更智能：
- 动态节点标记（Patch Flags）：在 diff 时跳过静态节点比对
- 区块树（Block Tree）：按需更新动态区块，减少递归层级
- 缓存事件处理函数，避免重复生成
性能对比
Vue 3 在以下场景有明显优势：
- 大规模数据响应：Proxy 的惰性劫持比递归 defineProperty 更快
- 组件更新：更精确的依赖追踪使得重渲染范围更小
- 内存占用：共享的静态内容被提升，减少重复创建
代码示例对比
Vue 2 响应式实现片段
Object.defineProperty(obj, key, {
get() {
track(); // 依赖收集
return val;
},
set(newVal) {
val = newVal;
trigger(); // 触发更新
}
});Vue 3 响应式实现片段
const proxy = new Proxy(target, {
get(target, key) {
track(target, key);
return Reflect.get(target, key);
},
set(target, key, value) {
Reflect.set(target, key, value);
trigger(target, key);
}
});迁移注意事项
从 Vue 2 迁移到 Vue 3 需注意：
- 移除 $on/$off 事件总线模式，改用 mitt 等库
- 生命周期钩子更名（如 destroyed → unmounted）
- v-model 的 prop/event 默认名称变更
- 过滤器（filter）被移除，建议用计算属性替代
两种版本均遵循 MVVM 模式，但 Vue 3 在架构设计上更现代化，适合对性能和维护性要求更高的项目。
