vue底层实现原理
Vue 底层实现原理
Vue.js 的核心实现基于响应式系统、虚拟 DOM 和组件化设计。以下是其底层实现的关键技术点：
响应式系统
Vue 2.x 使用 Object.defineProperty 实现数据劫持，通过 getter 和 setter 监听对象属性的变化。当数据被访问或修改时，触发依赖收集和派发更新。
Vue 3.x 改用 Proxy 替代 Object.defineProperty，解决了无法监听数组索引变化和对象新增属性的问题。Proxy 可以直接拦截整个对象的操作，性能更好。
// Vue 2.x 响应式简化实现
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log('get:', key);
return val;
},
set(newVal) {
console.log('set:', key);
val = newVal;
}
});
}虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 抽象真实 DOM，减少直接操作 DOM 的开销。当数据变化时，生成新的虚拟 DOM 树，通过 Diff 算法比较新旧树的差异，最后局部更新真实 DOM。
Diff 算法采用同级比较策略，通过双端对比、key 值优化等方式提高比对效率。时间复杂度从 O(n^3) 优化到 O(n)。
模板编译
Vue 模板会被编译成渲染函数（render function），这个过程包括：
- 解析器将模板转换为 AST（抽象语法树）
- 优化器标记静态节点
- 代码生成器将 AST 转换为渲染函数代码
// 模板编译结果示例
const template = '<div>{{ message }}</div>';
const render = new Function('with(this){return _c("div",[_v(_s(message))])}');组件系统
Vue 组件是基于选项对象的可复用实例。组件初始化时会合并选项（mixins、extends 等），建立父子组件关系链，并管理生命周期钩子。
每个组件实例对应一个渲染 watcher，当响应式数据变化时触发组件重新渲染。
异步更新队列
Vue 通过异步队列批量处理数据变更，避免不必要的重复渲染。使用 nextTick 方法实现延迟回调，内部优先使用微任务（Promise/MutationObserver）。
生命周期管理
Vue 组件生命周期钩子通过合并策略注入到特定阶段。例如 created 钩子在实例初始化完成后触发，mounted 在首次渲染完成后触发。
插件系统
Vue 通过 Vue.use() 注册插件，插件可以添加全局方法/指令、混入选项或扩展原型链。内部通过 apply 方法调用插件的 install 函数。
