最近在玩React，写了几个demo惊醒自己其实对vue的了解还是半斤八两，主要还是在公司总是写业务代码不咋注重底层（哎，不想加班QAQ），趁此机会重新过一遍vue文档想要稍微了解一下vue双向绑定的原理和简单实现方案。
首先我们先说说传统的MVC模式，MVC指的是Model-View-Controller。MVC模式是单向数据绑定，就是将Model中的数据绑定到View（显示层）上，在执行Controller去修改Model中的数据后，Model会再次通知View去改变。这是一个单向循环的数据绑定操作。然而Vue不是采用MVC模式，他使用的是MVVM模式，MVVM指Model-View-ViewModel模式。MVVM是将Model中的数据绑定到ViewModel中，Model层的变化会通知ViewModel使其更新View层，反过来View层的变化也会通知ViewModel使其更新Model层。因此双向绑定我便可以理解为model的数据更新能使得View层的更新，并且用户更新View层也会导致Model层的数据自动更新。
我们在网上随便搜vue 双向绑定，大部分搜出的结果都会说这么一句话：vue数据双向绑定是通过数据劫持结合发布-订阅模式的方式来实现的。当初我看这句话的时候真的是完全无法理解其中含义，过了一段时间以后我再回头看其他资料结合官方文档的解释才能理解（我太笨了 QAQ）。接下来我就简单的描述一下Vue的双向绑定原理。
按照Vue官方文档中的描述，我们将JS对象传入Vue实例作为data选项，Vue会遍历这个对象的所有属性并使用Object.defineProperty()，将对象中的各个属性转化为getter和setter。vue定义了getter和setter并在其中设置了更新dom的方法，当对象中的这个属性被调用或修改时（即get/set时），vue会在属性变化的同时执行更新DOM的方法，这样就可以及时更新在页面上。（原理如下，Object.defineProperty()这个API大家可以去MDN了解一下）
Object.defineProperty(data, '我要修改这个属性的getter和setter', {
get: function(){
console.log('get返回值之前我先做点事情')
/*
* 这里是通知变化代码
*/
return value
},
set: function(newValue){
value = newValue
console.log('set设置好以后我再做点事情')
/*
* 这里是通知更新代码
*/
}
})
下面根据官方文档简单描述一下vue的双向绑定是如何实现的：
官方文档的双向绑定图片实例
vue中每个组件实例都对应一个 watcher 实例，现在我们把目光聚焦在上图的紫色圆中。紫色圆代表Data，组件初始化就会修改Data中每个属性的getter和setter函数。当组件中某个属性被get时，getter会同时通知Watcher实例，让Watcher拿个小本子记一下我这里有这么个属性；setter也类似，当属性被修改执行set时，setter也会通知watcher。watcher收到通知后会检查被改动的属性是否记录在小本子上并检查是否有变动，在且有变化的情况下就继续往下通知组件渲染函数让它去更新虚拟DOM树。(暂时想不到更形象的比喻了 - -)
后面我又去找了找原生JS如何实现vue的双向绑定，找到一个文章写的很棒，现在先在这里记录一下这个文章：双向绑定实现过程。由于我的理解还没那么深入，暂时不写实现过程了，根据前面那个文章的描述我也试着写了一下，下面是我写的代码地址。
网友评论