这是我学习的时候找到的最小化 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){
Object.keys(data).forEach(key => {
let obv = new Observer()
if(typeof data[key]=='Object') observe(data[key]);//判断是否是引用值，是则递归遍历 observe(data)
data["_"+key] = data[key]
// 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
Object.defineProperty(data, key, {
get(){
Observer.target && obv.addSubNode(Observer.target);//在获取该属性值的时候，若Object.target有值的时候，则将该节点加到key的obv的subNode数组中，代表这个节点使用了该属性值
return data['_'+key]
},
set(newVal){
obv.update(newVal)//将使用该key的节点都遍历一遍，并赋予新的值
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;//将使用key的节点添加到Observer.target
this.opt.data[key]; //这时候跳到属性选择符的getter，将该节点添加到使用key的数组中
Observer.target = null;//恢复
}
else if (child.firstElementChild) //子节点不是文本节点
this.compile(child);//进入下一层
})
}
}
// 常规观察者类（每一个属性都自己的观察者，负责收集使用该属性的元素节点，并身具添加节点和更新节点值的方法，观察者订阅了某个属性值，当属性值发生变化，观察者执行update（newVal））
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 函数，完成响应式更新
