vue底层原理实现
Vue 的响应式原理
Vue 的响应式系统是其核心特性之一，通过数据劫持和依赖收集实现。当数据变化时，视图自动更新。
Object.defineProperty
Vue 2.x 使用 Object.defineProperty 劫持对象的属性访问和修改。通过 getter 收集依赖（Watcher），在 setter 中触发更新。
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log('get', key);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log('set', key);
val = newVal;
}
}
});
}Proxy
Vue 3.x 改用 Proxy 实现响应式，解决了 Vue 2.x 对数组和新增属性的监听限制。
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
console.log('get', key);
return Reflect.get(target, key);
},
set(target, key, val) {
console.log('set', key);
return Reflect.set(target, key, val);
}
});
}虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 优化渲染性能，减少直接操作真实 DOM 的开销。
虚拟 DOM 结构 虚拟 DOM 是轻量化的 JavaScript 对象，描述 DOM 结构。
const vnode = {
tag: 'div',
props: { id: 'app' },
children: [
{ tag: 'span', children: 'hello' }
]
};Diff 算法
Diff 算法比较新旧虚拟 DOM 的差异，最小化 DOM 操作。采用同层比较策略，通过 patch 函数更新。
function patch(oldVnode, newVnode) {
if (oldVnode === newVnode) return;
const el = oldVnode.el;
if (sameVnode(oldVnode, newVnode)) {
patchProps(el, oldVnode.props, newVnode.props);
patchChildren(el, oldVnode.children, newVnode.children);
} else {
replaceVnode(el, newVnode);
}
}模板编译
Vue 的模板通过编译器转换为渲染函数，最终生成虚拟 DOM。
编译流程
- 解析模板为 AST（抽象语法树）。
- 优化 AST（标记静态节点）。
- 生成渲染函数代码。
const ast = parse(template);
optimize(ast);
const code = generate(ast);渲染函数示例
模板 <div>{{ msg }}</div> 编译为：
function render() {
return h('div', this.msg);
}组件化实现
Vue 的组件是独立的模块，通过选项对象定义，支持生命周期和数据通信。
组件定义
组件通过 Vue.component 或单文件组件（SFC）定义。
Vue.component('my-component', {
template: '<div>{{ message }}</div>',
data() {
return { message: 'Hello' };
}
});生命周期钩子
组件从创建到销毁的各个阶段触发钩子函数，如 created、mounted 等。
export default {
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
}
};事件系统
Vue 的事件系统基于发布-订阅模式，支持组件间通信。
自定义事件
通过 $emit 触发事件，$on 监听事件。
// Parent
this.$on('event', handler);
// Child
this.$emit('event', payload);事件总线 全局事件总线用于跨组件通信。
const bus = new Vue();
bus.$emit('global-event');
bus.$on('global-event', callback);总结
Vue 的底层实现结合了响应式数据绑定、虚拟 DOM、模板编译和组件化设计。Vue 2.x 基于 Object.defineProperty，Vue 3.x 升级为 Proxy，性能与功能均有显著提升。理解这些原理有助于更好地使用 Vue 并解决开发中的问题。
