使用Vue.js已經(jīng)有一段時(shí)間了俭驮，為了更好的理解它的原理葛家，最近在理解Vue.js的源碼名挥，Vue.js上手比較簡(jiǎn)單肃拜。Vue.js的響應(yīng)式原理依賴Object.definePropperty,這也是Vue不支持ie8一下版本的原因，Vue通過(guò)設(shè)定對(duì)象屬性的setter/getter方法來(lái)監(jiān)聽數(shù)據(jù)的變化真朗，通過(guò)getter進(jìn)行依賴收集，而每個(gè)setter方法就是一個(gè)觀察者僧诚，數(shù)據(jù)變化的時(shí)候通知訂閱者更新視圖遮婶。
將數(shù)據(jù)data變成可觀察（observable）
Vue是怎么把所有data下面的屬性變成可觀察的（observable）呢
function observer(value, cb) {
Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}
function defineReactive (obj, key, val, cb) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: ()=>{
/*....依賴收集等....*/
/*Github:https://github.com/answershuto*/
},
set:newVal=> {
cb();/*訂閱者收到消息的回調(diào)*/
}
})
}
class Vue {
constructor(options) {
this._data = options.data;
observer(this._data, options.render)
}
}
let app = new Vue({
el: '#app',
data: {
text: 'text',
text2: 'text2'
},
render(){
console.log("render");
}
})
為了便于理解，首先考慮一種最簡(jiǎn)單的情況湖笨，不考慮數(shù)組等情況旗扑，代碼如上所示。在initData中會(huì)調(diào)用observe這個(gè)函數(shù)將Vue的數(shù)據(jù)設(shè)置成observable的慈省。當(dāng)_data數(shù)據(jù)發(fā)生改變的時(shí)候就會(huì)觸發(fā)set臀防，對(duì)訂閱者進(jìn)行回調(diào)（在這里是render)
那么問(wèn)題來(lái)了，需要對(duì)app._data.text操作才會(huì)觸發(fā)set边败。為了偷懶袱衷，我們需要一種防病的方法通過(guò)app.text直接設(shè)置就能觸發(fā)set對(duì)視圖進(jìn)行重繪。那么就需要用到代理笑窜。
代理
我們可以在Vue的構(gòu)造函數(shù)constructor中為data執(zhí)行一個(gè)代理proxy致燥。這樣我們就把data上面的屬性代理到了vm實(shí)例上。
_proxy(options.data);/*構(gòu)造函數(shù)中*/
/*代理*/
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;
}
})
});
}
我們就可以用app.text代替app._data.text了排截。
