我们先看一下运行结果
name 和 age 被响应式的渲染出来，在 2s 后我们修改了 name 的值，同样能在页面正确更新。
我们来看一下最小化的 MVVM 的源码
class Vue{ constructor(opt){ this.opt = opt this.observe(opt.data) let root = document.querySelector(opt.el) this.compile(root) } // 为响应式对象 data 里的每一个 key 绑定一个观察者对象 observe(data){ .keys(data).forEach(key => { let obv = new Observer() data["_"+key] = data[key] // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生 .defineProperty(data, key, { get(){ Observer.target && obv.addSubNode(Observer.target); return data['_'+key] }, set(newVal){ obv.update(newVal) data['_'+key] = newVal } }) }) } // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来 compile(node){ [].forEach.call(node.childNodes, child =>{ if(!child.firstElementChild && /{{(.*)}}/.test(child.innerHTML)){ let key = RegExp.$1.trim() child.innerHTML = child.innerHTML.replace(new RegExp('\{\{\s*'+ key +'\s*\}\}', 'gm'),this.opt.data[key]) Observer.target = child this.opt.data[key] Observer.target = null } else if (child.firstElementChild) this.compile(child) }) } }// 常规观察者类class Observer{ constructor(){ this.subNode = [] } addSubNode(node){ this.subNode.push(node) } update(newVal){ this.subNode.forEach(node=>{ node.innerHTML = newVal }) }}复制代码【重点分析】接下来梳理一下这段代码的思路，顺便了解一下 MVVM 闭包的艺术：
- [observe 函数]：首先我们会对需要响应式的
data对象进行 for 循环遍历，为data的每一个key映射一个观察者对象- 在 ES6 中，for 循环每次执行，都可以形成闭包，因此这个观察者对象就存放在闭包中
- 闭包形成的本质是 内层作用域中堆地址暴露，这里我们巧妙的用 getter/setter 函数暴露了 for 循环里的观察者
- [compile 函数]：我们从根节点向下遍历 DOM，遇到 mustache 形式的文本，则映射成 data.key 对应的值，同时记录到观察者中
- 当遍历到 {{xxx}} 形式的文本，我们正则匹配出其中的变量，将它替换成 data 中的值
- 为了满足后续响应式的更新，将该节点存储在 key 对应的观察者对象中，我们用 getter 函数巧妙的操作了闭包
- 在页面初次渲染之后，后续的
eventLoop中，如果修改了key的值，实际会通过 setter 触发观察者的 update 函数，完成响应式更新
附上述演示案例的完整代码 github地址
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < name="viewport" content="width=device-width, initial-scale=1.0"></head><body> <div id='app'> <h3>姓名</h3> <p>{{name}}</p> <h3>年龄</h3> <p>{{age}}</p> </div></body></html>< >document.addEventListener('DOMContentLoaded', function(){ let opt = {el:'#app', data:{name:'检索中...', age:30}} let vm = new Vue(opt) setTimeout(() => { opt.data.name = '王永峰' }, 2000);}, false)class Vue{ constructor(opt){ this.opt = opt this.observe(opt.data) let root = document.querySelector(opt.el) this.compile(root) } // 为响应式对象 data 里的每一个 key 绑定一个观察者对象 observe(data){ .keys(data).forEach(key => { let obv = new Observer() data["_"+key] = data[key] // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生 .defineProperty(data, key, { get(){ Observer.target && obv.addSubNode(Observer.target); return data['_'+key] }, set(newVal){ obv.update(newVal) data['_'+key] = newVal } }) }) } // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来 compile(node){ [].forEach.call(node.childNodes, child =>{ if(!child.firstElementChild && /{{(.*)}}/.test(child.innerHTML)){ let key = RegExp.$1.trim() child.innerHTML = child.innerHTML.replace(new RegExp('\{\{\s*'+ key +'\s*\}\}', 'gm'),this.opt.data[key]) Observer.target = child this.opt.data[key] Observer.target = null } else if (child.firstElementChild) this.compile(child) }) } }// 常规观察者类class Observer{ constructor(){ this.subNode = [] } addSubNode(node){ this.subNode.push(node) } update(newVal){ this.subNode.forEach(node=>{ node.innerHTML = newVal }) }}</ >复制代码作者：maodayeyeye
原文发布时间：2018年06月12日
本文来源掘金如需转载请紧急联系作者
继续阅读与本文标签相同的文章
下一篇 :
Feflow 源码解读
-
如何打造数据科学团队，你想知道的都在这里
2026-06-02栏目： 教程
-
Airbnb: React Native 从选择到放弃
2026-06-02栏目： 教程
-
前端容灾
2026-06-02栏目： 教程
-
前端的焦虑，你想过30岁以后的前端路怎么走吗？
2026-06-02栏目： 教程
-
精读《你不知道的javascript》中卷
2026-06-02栏目： 教程