vue双向绑定原理初探

几种实现双向绑定的作法

发布者-订阅者模式（backbone.js）

脏值检查（angular.js） 

数据劫持（vue.js）

发布者-订阅者模式: 通常经过sub, pub的方式实现数据和视图的绑定监听，更新数据方式一般作法是 vm.set('property', value) 

这种方式如今毕竟太low了，咱们更但愿经过 vm.property = value 这种方式更新数据，同时自动更新视图，因而有了下面两种方式

脏值检查: angular.js 是经过脏值检测的方式比对数据是否有变动，来决定是否更新视图，最简单的方式就是经过 setInterval() 定时轮询检测数据变更，固然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大体以下：

• DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

• XHR响应事件 ( $http )

• 浏览器Location变动事件 ( $location )

• Timer事件( $timeout , $interval )

• 执行 $digest() 或 $apply()

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

极简双向绑定的实现

<input type="text" id="a">
<br>
<span id="b"></span>
<script>
    var obj = {}
    Object.defineProperty(obj, 'hello',{
      set: function (newVal) {
        document.getElementById('a').value = newVal
        document.getElementById('b').innerHTML =newVal
      }
    })
    document.addEventListener('keyup',function (e) {
      obj.hello =e.target.value
    })
</script>

 

VUE的双向绑定的实现

思路整理

已经了解到vue是经过数据劫持的方式来作数据绑定的，其中最核心的方法即是经过Object.defineProperty()来实现对属性的劫持，达到监听数据变更的目的，无疑这个方法是本文中最重要、最基础的内容之一.
整理了一下，要实现mvvm的双向绑定，就必需要实现如下几点：
一、实现一个数据监听器Observer，可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者
二、实现一个指令解析器Compile，对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
三、实现一个Watcher，做为链接Observer和Compile的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数，从而更新视图
四、mvvm入口函数，整合以上三者