vue mvvm 实现
Vue MVVM 实现原理
Vue.js 是一个基于 MVVM（Model-View-ViewModel）模式的渐进式框架。其核心实现主要依赖数据绑定、依赖收集和虚拟 DOM 等技术。
数据劫持与响应式
Vue 通过 Object.defineProperty 或 ES6 的 Proxy 实现数据劫持，监听数据变化。当数据被修改时，触发 setter 函数，通知依赖该数据的视图更新。
// 简化版数据劫持实现
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
// 触发更新
}
});
}依赖收集与观察者模式
Vue 使用观察者模式实现依赖收集。每个响应式属性都有一个 Dep 实例，用于存储依赖（Watcher）。当数据变化时，Dep 通知所有 Watcher 更新视图。
class Dep {
constructor() {
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
notify() {
this.subs.forEach(sub => sub.update());
}
}
class Watcher {
update() {
// 更新视图
}
}模板编译与虚拟 DOM
Vue 将模板编译为渲染函数，生成虚拟 DOM。通过 patch 算法对比新旧虚拟 DOM，最小化 DOM 操作。
// 简化版虚拟 DOM 示例
function createVNode(tag, props, children) {
return { tag, props, children };
}双向数据绑定
Vue 通过 v-model 实现双向绑定，本质是语法糖，结合 v-bind 和 v-on 实现。
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">组件化实现
Vue 组件本质是可复用的 Vue 实例，通过 Vue.component 注册。组件间通信通过 props 和 events 实现。
Vue.component('my-component', {
props: ['title'],
template: '<div>{{ title }}</div>'
});核心流程总结
- 初始化阶段：解析模板，创建响应式数据，建立依赖关系。
- 挂载阶段：执行渲染函数，生成虚拟 DOM，转换为真实 DOM。
- 更新阶段：数据变化触发 setter，通知 Watcher 重新渲染。
- 销毁阶段：移除事件监听和 Watcher，避免内存泄漏。
Vue 的 MVVM 实现通过数据驱动视图，开发者只需关注数据状态，无需手动操作 DOM，提高了开发效率和可维护性。
