答案：该MVVM框架通过Object.defineProperty实现数据劫持，结合Dep类进行依赖收集与通知，compile函数解析模板指令并绑定更新，最终在MVVM类中整合数据监听与视图渲染，实现数据变化自动驱动视图更新。
实现一个简单的MVVM框架，核心是数据劫持结合发布-订阅模式，通过Object.defineProperty监听数据变化，并在视图中响应更新。下面是一个极简但完整的MVVM示例，帮助理解其工作原理。
1. 数据劫持：监听数据变化
使用Object.defineProperty对数据对象的属性进行 getter/setter 重写，实现数据劫持。
function observe(data) {
if (!data || typeof data !== 'object') return;
Object.keys(data).forEach(key => {
let value = data[key];
const dep = []; // 依赖收集器
observe(value); // 递归监听嵌套对象
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get() {
if (Dep.target) {
dep.push(Dep.target); // 收集依赖
}
return value;
},
set(newVal) {
if (newVal === value) return;
value = newVal;
observe(newVal); // 新值也需监听
dep.forEach(fn => fn()); // 通知更新
}
});
});
}
2. 依赖管理：Dep类
Dep（Dependency）用于管理 watcher，实现依赖收集和派发更新。
const Dep = {
target: null
};
3. 编译模板：解析指令和插值
扫描DOM，解析v-model、{{ }}等语法，绑定数据更新视图。
立即学习“Java免费学习笔记（深入）”；
function compile(el, vm) {
const fragment = document.createDocumentFragment();
let child;
while (child = el.firstChild) {
fragment.appendChild(child);
}
function replace(node) {
const reg = /\{\{(.*)\}\}/;
if (node.nodeType === 3 && reg.test(node.nodeValue)) {
const key = RegExp.$1.trim();
Dep.target = () => {
node.nodeValue = vm[key];
};
node.nodeValue = vm[key]; // 初始化赋值
Dep.target = null;
}
if (node.nodeType === 1) {
const attrs = node.attributes;
Array.from(attrs).forEach(attr => {
const name = attr.name;
const exp = attr.value;
if (name === 'v-model') {
node.value = vm[exp];
node.addEventListener('input', e => {
vm[exp] = e.target.value;
});
Dep.target = () => {
node.value = vm[exp];
};
Dep.target = null;
}
});
}
if (node.childNodes && node.childNodes.length) {
compile(node, vm);
}
}
fragment.childNodes.forEach(replace);
el.appendChild(fragment);
}
4. MVVM主类
整合数据监听、模板编译和初始化逻辑。
function MVVM(options) {
this.$data = options.data;
const id = options.el;
const el = document.querySelector(id);
observe(this.$data);
compile(el, this);
// 代理this上的属性访问
Object.keys(this.$data).forEach(key => {
Object.defineProperty(this, key, {
get() {
return this.$data[key];
},
set(newVal) {
this.$data[key] = newVal;
}
});
});
}
使用方式：
new MVVM({
el: '#app',
data: {
message: 'Hello MVVM'
}
});
HTML结构：
<div id="app">
<input v-model="message" />
<p>{{ message }}</p>
</div>
当输入框内容变化时，message被更新，setter触发，通知所有依赖重新渲染，视图自动刷新。
