×

Vue.js双向绑定的实现原理

96
fullbook
2017.02.20 13:34* 字数 906

如果觉得不错的话,请点一下赞吧 😊
本文章会持续更新中。。。

2016年,vuejs可谓是大放异彩,以迅雷不及掩耳之势赶React超Angular,用惯jquery的我一下子被Vue开篇介绍的双向绑定给惊着了!一下子按捺不住好奇心,打算刨根究底,看看双向绑定到底是怎样实现的?

目标

第二个版本:更新AngularJS双向绑定的实现原理
第三个版本:更新BackboneJS双向绑定的实现原理
第四个版本:更新ReactJS双向绑定的实现原理

前言

发布者-订阅者模式(backbone.js): 一般通过sub, pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是 vm.set('property', value)。
数据劫持(vue.js): 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。(采用数据劫持结合发布者-订阅者模式的方式)

关于数据绑定

(1)单向数据绑定
目前前端框架大都采用MV*的模式,其中M(model)指的是模型,也就是数据;V(view)指的是视图,也就是页面展现的部分。通常,我们需要编写代码,将从服务器获取的数据进行“渲染”并展现到视图上。每当数据有变更时,我们会再次进行渲染,从而更新视图,使得视图与数据保持一致。也就是:

37341-292112f4548b085a.png

而另一方面,页面也会通过用户的交互,产生状态、数据的变化,这个时候,我们则编写代码,将视图对数据的更新同步到数据,以致于同步到后台服务器。也就是:

37341-01e1f8e09f2bdf8e.png

(2)双向数据绑定

37341-ce55a694c880a802.png

Backbonejs:Model 到 View 的数据传递,可以在 View 中监听 Model 的 change 事件,每当 Model 更新,View 中重新执行 render。而 View 到 Model 的数据传递,可以监听 View 对应的 DOM 元素的各种事件,在检测到 View 状态变更后,将变更的数据发送到 Model。
AngularJS:采用“脏值检测”的方式,数据发生变更后,对于所有的数据和视图的绑定关系进行一次检测,识别是否有数据发生了改变,有变化进行处理,可能进一步引发其他数据的改变,所以这个过程可能会循环几次,一直到不再有数据变化发生后,将变更的数据发送到视图,更新页面展现。如果是手动对 ViewModel 的数据进行变更,为确保变更同步到视图,需要手动触发一次“脏值检测”。
VueJS:采用 ES5 提供的 Object.defineProperty() 方法,监控对数据的操作,从而可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。

一、VueJS双向数据绑定实现

(1)Object.defineProperty简单应用
<pre>
var obj = {};
Object.defineProperty(obj, 'hello', {
get: function() {
console.log('get方法获取值');
},
set: function(val) {
console.log('set方法设置的值为:' + val);
}
});
obj.hello; // get方法获取值
obj.hello = 'Hello World';
</pre>

前端
Web note ad 1