关于Vue.js的响应式原理

写在前面

因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。

文章的原地址：https://github.com/answershuto/learnVue。

在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src，希望可以对其他想学习Vue源码的小伙伴有所帮助。

可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。

关于Vue.js

Vue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持E8
以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter
方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

将数据data变成可观察(observable)的

那么Vue是如何将所有data下面的所有属性变成可观察的(observable)呢?

1. function observer(value) { 
2.     Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) 
3. } 
4.  
5. function defineReactive (obj, key, val, cb) { 
6.     Object.defineProperty(obj, key, { 
7.         enumerable: true, 
8.         configurable: true, 
9.         get: ()=>{ 
10.             /*....依赖收集等....*/ 
11.         }, 
12.         set:newVal=> { 
13.             cb();/*订阅者收到消息的回调*/ 
14.         } 
15.     }) 
16. } 
17.  
18. class Vue { 
19.     constructor(options) { 
20.         this._data = options.data; 
21.         observer(this._data, options.render) 
22.     } 
23. } 
24.  
25. let app = new Vue({ 
26.     el: '#app', 
27.     data: { 
28.         text: 'text', 
29.         text2: 'text2' 
30.     }, 
31.     render(){ 
32.         console.log("render"); 
33.     } 
34. })  

为了便于理解，首先考虑一种最简单的情况，不考虑数组等情况，代码如上所示。在initData中会调用observe这个函数将Vue的数据设置成observable的。当_data数据发生改变的时候就会触发set，对订阅者进行回调(在这里是render)。

那么问题来了，需要对app._date.text操作才会触发set。为了偷懒，我们需要一种方便的方法通过app.text直接设置就能触发set对视图进行重绘。那么就需要用到代理。

代理

我们可以在Vue的构造函数constructor中为data执行一个代理proxy。这样我们就把data上面的属性代理到了vm实例上。

1. _proxy(options.data);/*构造函数中*/ 
2.  
3. /*代理*/ 
4. function _proxy (data) { 
5.     const that = this; 
6.     Object.keys(data).forEach(key => { 
7.         Object.defineProperty(that, key, { 
8.             configurable: true, 
9.             enumerable: true, 
10.             get: function proxyGetter () { 
11.                 return that._data[key]; 
12.             }, 
13.             set: function proxySetter (val) { 
14.                 that._data[key] = val; 
15.             } 
16.         }) 
17.     }); 
18. }  

我们就可以用app.text代替app._data.text了。

作者：染陌同学

来源：51CTO