vue mvvm实现
Vue MVVM 实现原理
Vue.js 是一个基于 MVVM（Model-View-ViewModel）模式的框架，其核心是通过数据绑定和响应式系统实现视图与数据的自动同步。以下是 Vue 实现 MVVM 的关键机制：
数据劫持与响应式系统
Vue 使用 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）劫持数据对象的属性访问。当数据变化时，触发依赖的视图更新。
Vue 2.x 实现示例：
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;
// 触发更新
}
}
});
}依赖收集与派发更新
通过 Dep（依赖管理器）和 Watcher（观察者）实现依赖跟踪：
- Dep：每个响应式属性对应一个
Dep实例，用于存储依赖该属性的Watcher。 - Watcher：在组件渲染时创建，负责执行更新函数（如渲染函数）。
简化代码：
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}
class Watcher {
update() {
// 执行组件更新
}
}模板编译与虚拟 DOM
Vue 将模板编译为渲染函数：
- 解析模板：生成 AST（抽象语法树）。
- 优化 AST：标记静态节点。
- 生成渲染函数：将 AST 转换为可执行的
render函数。
虚拟 DOM 差异比对（Diff 算法）高效更新真实 DOM。
双向数据绑定
通过 v-model 指令实现表单元素的双向绑定，本质是语法糖：
- 输入事件监听：如
input事件更新数据。 - 数据响应式更新：数据变化自动更新视图。
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">组件化与通信
Vue 组件是 MVVM 中的 ViewModel 层，通过以下方式通信：
- Props 向下传递：父组件向子组件传值。
- Events 向上传递：子组件通过
$emit触发父组件事件。 - Provide/Inject：跨层级数据传递。
生命周期管理
Vue 实例的生命周期钩子（如 created、mounted）允许在特定阶段执行逻辑，确保数据与视图的正确初始化及更新。
总结
Vue 的 MVVM 实现核心在于：
- 数据劫持监听变化。
- 依赖收集自动更新。
- 虚拟 DOM 高效渲染。
- 组件化隔离职责。
通过以上机制，开发者只需关注数据逻辑，无需手动操作 DOM。
