关于Vue.js的响应式原理

Vue.js响应式道理

写在前面

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

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

关于Vue.js

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

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

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

为了便于懂得，起首推敲一种最简单的情况，不推敲数组等情况，代码如上所示。在initData中会调用observe这个函数将Vue的数据设置成observable的。当_data数据产生改变的时刻就会触发set，对订阅┞愤进行回调(在这里是render)。

那么问题来了，须要对app._date.text操作才会触发set。为恋氐懒，我们须要一种便利的办法经由过程app.text直接设置就能触发set对视图进行重绘。那么就须要用到代劳。

代劳

可能会有懂得存在误差的处所，迎接提issue指出，合营进修，合营进步。

我们可以在Vue的构造函数constructor中为data履行一个代劳proxy。如许我们就把data膳绫擎的属性代劳到了vm实例上。

_proxy(options.data);/*构造函数中*/ 
 
/*代劳*/ 
function _proxy (data) { 
    const that = this; 
    Object.keys(data).forEach(key => { 
        Object.defineProperty(that, key, { 
            configurable: true, 
            enumerable: true, 
            get: function proxyGetter () { 
                return that._data[key]; 
            }, 
            set: function proxySetter (val) { 
                that._data[key] = val; 
            } 
        }) 
    }); 
}

function observer(value) { 
    Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) 
} 
 
function defineReactive (obj, key, val, cb) { 
    Object.defineProperty(obj, key, { 
        enumerable: true	
			 1/2    1 2 下一页 尾页	
			

　　推荐阅读
　　关于刷屏的“小朋友画廊” 你想知道的东西都在这
            
            一个名叫“小同伙画廊”的H5在很多人的同伙圈悄然传播开来。这个H5展示了36幅画作，用户点开H5可以购买本身爱好的画作，获得电子版。值得留意的是，36幅画作均由患有自闭症的特>>>详细阅读


本文标题：关于Vue.js的响应式原理
地址：http://www.17bianji.com/lsqh/37034.html
 1/2    1