vue mvvm实现
Vue MVVM 实现原理
Vue 的 MVVM（Model-View-ViewModel）实现主要依赖于数据绑定和响应式系统。以下是核心实现机制：
响应式数据绑定
Vue 使用 Object.defineProperty 或 Proxy（Vue 3）实现数据劫持。当数据变化时，自动触发视图更新。
// 简化版数据劫持示例
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
// 触发更新
dep.notify();
}
});
}虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 优化渲染性能。当数据变化时，生成新的虚拟 DOM 树，通过 Diff 算法比较差异后局部更新真实 DOM。
// 简化版虚拟 DOM 结构
{
tag: 'div',
props: { id: 'app' },
children: [
{ tag: 'span', props: {}, children: ['Hello'] }
]
}模板编译
Vue 将模板编译为渲染函数。模板中的指令和插值会被转换为可执行的 JavaScript 代码。
// 模板
<div id="app">{{ message }}</div>
// 编译后的渲染函数
function render() {
with(this) {
return _c('div', { attrs: { "id": "app" } }, [_v(_s(message))]);
}
}依赖收集系统
每个响应式属性都有一个 Dep 实例，用于收集依赖的 Watcher。当数据变化时，通知所有 Watcher 更新。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}实现双向绑定的关键
v-model 指令是语法糖，本质上是 value 属性和 input 事件的组合：
<input v-model="msg">
// 等价于
<input :value="msg" @input="msg = $event.target.value">生命周期管理
Vue 实例的生命周期钩子提供了在特定阶段执行代码的能力，如 created、mounted 等，这些钩子函数由框架在适当时机调用。
以上机制共同构成了 Vue 的 MVVM 实现，使开发者能够专注于数据和业务逻辑，而不必手动操作 DOM。
