vue实现原理比较
Vue 2.x 实现原理
响应式系统
基于 Object.defineProperty 实现数据劫持，通过 getter 和 setter 监听对象属性的变化。每个组件实例对应一个 Watcher，依赖收集阶段记录数据与视图的关联关系，数据变化时触发 Dep.notify() 通知 Watcher 更新视图。
虚拟DOM与Diff算法
通过 snabbdom 库的改进实现虚拟DOM，采用双端对比的Diff算法优化DOM操作。更新时生成新旧虚拟DOM树，通过 patch 函数对比差异并最小化DOM操作。
模板编译
将模板转换为渲染函数：
- 解析器将模板转为AST（抽象语法树）；
- 优化器标记静态节点；
- 代码生成器将AST转为可执行的渲染函数。
组件化
组件通过 Vue.extend 创建构造函数，生命周期钩子管理组件状态。父子组件通信依赖 props 和 $emit，跨层级通信通过 provide/inject 或事件总线。
Vue 3.x 实现原理
响应式系统升级
使用 Proxy 替代 Object.defineProperty，支持监听动态新增属性和数组索引变化。引入 Reflect 处理代理操作，依赖收集通过 effect 和 track/trigger 实现。
Composition API
逻辑复用基于 setup 函数，响应式数据通过 ref 和 reactive 创建。effect 函数替代 Watcher，支持更细粒度的依赖追踪。
性能优化
- 静态节点提升（Hoisting）：编译阶段标记静态节点，避免重复渲染；
- Patch Flag：虚拟DOM Diff时通过二进制标记跳过静态内容对比；
- 缓存事件处理函数减少不必要的更新。
模块化架构
采用Monorepo结构，将响应式、编译器等模块解耦。支持Tree-shaking，按需引入功能减少打包体积。
核心差异对比
响应式实现
Vue 2的 Object.defineProperty 无法检测数组索引和对象新增属性，需额外API（如 Vue.set）。Vue 3的 Proxy 天然支持这些场景，且性能更优。
虚拟DOM优化
Vue 3通过Patch Flag和Block Tree减少Diff范围，性能提升显著。例如仅含动态内容的区块会快速跳过静态部分。
代码组织
Vue 2的Options API强制按选项分类代码，逻辑分散。Vue 3的Composition API允许按功能聚合代码，类型推导也更友好。
TypeScript支持
Vue 3源码使用TypeScript重写，提供完整的类型定义。Vue 2需通过装饰器等扩展实现类型支持。
示例：响应式数据实现对比
Vue 2 数据劫持
Object.defineProperty(obj, key, {
get() {
track(); // 依赖收集
return value;
},
set(newVal) {
value = newVal;
trigger(); // 触发更新
}
});Vue 3 Proxy实现
const proxy = new Proxy(obj, {
get(target, key) {
track(target, key);
return Reflect.get(target, key);
},
set(target, key, value) {
Reflect.set(target, key, value);
trigger(target, key);
return true;
}
});
