答案：通过MutationObserver监听DOM变化，结合Proxy实现数据劫持，可构建轻量级响应式视图框架。利用模板解析绑定数据，动态更新节点内容，支持插值语法与指令，实现自动渲染与视图同步。
MutationObserver 是浏览器提供的 API，能监听 DOM 的增删改变化。结合它我们可以构建一个轻量级、响应式的自定义视图框架，无需依赖 React 或 Vue 等大型库。
理解 MutationObserver 基本用法
MutationObserver 可以监听节点添加、属性修改、文本内容变化等。创建观察器后，指定目标元素和配置项即可启动监听。
基础示例：
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
console.log('节点结构变化：', mutation);
}
if (mutation.type === 'attributes') {
console.log('属性变化：', mutation.target, mutation.attributeName);
}
});
});
// 开始监听某个容器
observer.observe(document.getElementById('app'), {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['class', 'style']
});
这个机制让我们能在 DOM 发生任何变动时介入处理，是实现响应式更新的关键。
设计简单的数据绑定与模板系统
要实现视图框架，需要将数据变化映射到 DOM 上。我们可以通过解析模板中的表达式，结合 MutationObserver 检测动态区域的变化。
例如，支持类似 {{ message }} 的插值语法：
- 遍历文本节点，查找 {{ }} 模式并提取绑定字段
- 建立数据字段到 DOM 节点的映射关系
- 当数据更新时，找到对应节点并替换内容
简单实现：
function bindText(node, data, keyPath) {
const update = () => {
const value = keyPath.split('.').reduce((obj, k) => obj[k], data);
node.textContent = value;
};
// 初次渲染
update();
// 将更新函数挂载以便后续调用
node._updateFn = update;
}
结合 Observer 实现自动更新
单纯监听 DOM 不够，我们要反向驱动——数据变则视图更新。可以使用 Proxy 监听数据模型，在属性变化时触发 DOM 更新。
示例：
function reactive(data, onUpdate) {
return new Proxy(data, {
set(target, key, value) {
target[key] = value;
onUpdate(key); // 通知更新
return true;
}
});
}
然后在 onUpdate 中调用所有关联的 _updateFn：
const appData = reactive({
message: 'Hello'
}, (key) => {
document.querySelectorAll('[data-bind]').forEach(node => {
if (node._updateFn) node._updateFn();
});
});
利用 MutationObserver 处理动态组件或指令
对于运行时插入的新元素（如通过 innerHTML 添加），我们需要检测这些动态内容并初始化绑定。
使用 MutationObserver 监听新增节点，并对符合条件的元素进行编译处理：
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1) { // 元素节点
if (node.hasAttribute && node.hasAttribute('v-text')) {
const key = node.getAttribute('v-text');
bindText(node, appData, key);
}
// 递归检查子节点
node.querySelectorAll('[v-text]').forEach(el => {
bindText(el, appData, el.getAttribute('v-text'));
});
}
});
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
这样即使通过 JS 动态插入带指令的元素，也能自动完成数据绑定。
基本上就这些。通过 Proxy 监听数据变化，配合 MutationObserver 捕获 DOM 结构更新，再辅以简单的模板解析，就能实现一个微型但可用的视图框架。虽然功能不如主流框架全面，但在特定场景下足够灵活高效。
