vue 实现原理
Vue 实现原理
Vue.js 是一个渐进式 JavaScript 框架，其核心实现原理主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。
响应式系统
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。当数据发生变化时，依赖该数据的视图会自动更新。
Vue 2 的响应式实现示例：
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`get ${key}:${val}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`set ${key}:${newVal}`);
val = newVal;
}
}
});
}Vue 3 改用 Proxy 实现：
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
console.log(`get ${key}`);
return Reflect.get(target, key);
},
set(target, key, value) {
console.log(`set ${key}:${value}`);
return Reflect.set(target, key, value);
}
});
}虚拟 DOM
Vue 通过虚拟 DOM 提高渲染效率。当状态变化时，Vue 会生成新的虚拟 DOM 树，通过 diff 算法比较新旧虚拟 DOM，计算出最小更新操作，然后批量更新真实 DOM。
虚拟 DOM 的简单实现：
function createVNode(tag, props, children) {
return { tag, props, children };
}
function patch(oldVNode, newVNode) {
// diff 算法实现
}模板编译
Vue 的模板会被编译成渲染函数。这个过程包括：
- 解析器将模板转换为 AST（抽象语法树）
- 优化器标记静态节点
- 代码生成器将 AST 转换为渲染函数
示例编译结果：
function render() {
with(this) {
return _c('div', { attrs: { id: 'app' } }, [
_c('h1', [_v(message)]),
_c('button', { on: { click: handleClick } }, [_v('Click me')])
]);
}
}组件化机制
Vue 组件是可复用的 Vue 实例。每个组件都有独立的响应式数据、模板和生命周期。组件系统通过以下方式实现：
- 组件注册和继承机制
- 组件通信（props/emit）
- 插槽系统
- 生命周期管理
组件示例：
Vue.component('my-component', {
props: ['title'],
template: '<div>{{ title }}</div>'
});依赖收集与派发更新
Vue 通过 Watcher 和 Dep 类实现依赖收集：
- 每个响应式属性都有一个 Dep 实例
- 当属性被访问时，当前 Watcher 会被添加到 Dep 中
- 当属性变化时，Dep 会通知所有 Watcher 更新
简化实现：
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}
class Watcher {
update() {
// 执行更新
}
}这些核心机制共同构成了 Vue 的响应式、高效和组件化的特性。
