理解原理之前，可以先查看 Object.defineProperty 相關(guān)知識(shí)點(diǎn)冷蚂。
1 Object.defineProperty
Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性， 并返回這個(gè)對(duì)象。
1.1 語法
Object.defineProperty(obj, prop, descriptor)
參數(shù)
- obj
要在其上定義屬性的對(duì)象锋边。 - prop
要定義或修改的屬性的名稱。 - descriptor
將被定義或修改的屬性描述符编曼。
1.2 示例
添加多個(gè)屬性和默認(rèn)值
考慮特性被賦予的默認(rèn)特性值非常重要豆巨，通常，使用點(diǎn)運(yùn)算符和 Object.defineProperty() 為對(duì)象的屬性賦值時(shí)掐场，數(shù)據(jù)描述符中的屬性默認(rèn)值是不同的往扔，如下例所示。
var o = {};
o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
value : 1,
writable : true,
configurable : true,
enumerable : true
});
// 另一方面熊户，
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
value : 1,
writable : false,
configurable : false,
enumerable : false
});
一般的 Setters 和 Getters
下面的例子展示了如何實(shí)現(xiàn)一個(gè)自存檔對(duì)象萍膛。 當(dāng)設(shè)置temperature 屬性時(shí)，archive 數(shù)組會(huì)獲取日志條目嚷堡。
function Archiver() {
var temperature = null;
var archive = [];
Object.defineProperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
archive.push({ val: temperature });
}
});
this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 輸出 'get!'蝗罗，獲取值的時(shí)候，調(diào)用 get 方法
arc.temperature = 11; // 設(shè)置值的時(shí)候，調(diào)用 set 方法
arc.temperature = 13; // 設(shè)置值的時(shí)候串塑，調(diào)用 set 方法
arc.getArchive(); // [{ val: 11 }, { val: 13 }]
或
var pattern = {
get: function () {
return 'I alway return this string,whatever you have assigned';
},
set: function () {
this.myname = 'this is my name string';
}
};
function TestDefineSetAndGet() {
Object.defineProperty(this, 'myproperty', pattern);
}
var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';
// 'I alway return this string,whatever you have assigned'
console.log(instance.myproperty);
// 'this is my name string'
console.log(instance.myname); // 繼承屬性
2 深入響應(yīng)式原理
如何追蹤變化
當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng)沼琉，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter拟赊。
這些 getter/setter 對(duì)用戶來說是不可見的刺桃，但是在內(nèi)部它們讓 Vue 能夠追蹤依賴粹淋，在屬性被訪問和修改時(shí)通知變更吸祟。
每個(gè)組件實(shí)例都對(duì)應(yīng)一個(gè) watcher 實(shí)例，它會(huì)在組件渲染的過程中把“接觸”過的數(shù)據(jù)屬性記錄為依賴桃移。之后當(dāng)依賴項(xiàng)的 setter 觸發(fā)時(shí)屋匕，會(huì)通知 watcher，從而使它關(guān)聯(lián)的組件重新渲染借杰。
檢測(cè)變化的注意事項(xiàng)
由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化过吻，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。例如：
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應(yīng)式的
vm.b = 2
// `vm.b` 是非響應(yīng)式的
對(duì)于已經(jīng)創(chuàng)建的實(shí)例蔗衡，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性纤虽。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性绞惦。例如逼纸，對(duì)于：
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時(shí)你可能需要為已有對(duì)象賦值多個(gè)新屬性济蝉，比如使用 Object.assign() 或 _.extend()杰刽。但是，這樣添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新王滤。在這種情況下贺嫂，你應(yīng)該用原對(duì)象與要混合進(jìn)去的對(duì)象的屬性一起創(chuàng)建一個(gè)新的對(duì)象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
聲明響應(yīng)式屬性
由于 Vue 不允許動(dòng)態(tài)添加根級(jí)響應(yīng)式屬性雁乡，所以你必須在初始化實(shí)例前聲明所有根級(jí)響應(yīng)式屬性第喳，哪怕只是一個(gè)空值：
var vm = new Vue({
data: {
// 聲明 message 為一個(gè)空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后設(shè)置 `message`
vm.message = 'Hello!'
異步更新隊(duì)列
可能你還沒有注意到，Vue 在更新 DOM 時(shí)是異步執(zhí)行的踱稍。只要偵聽到數(shù)據(jù)變化墩弯，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更寞射。如果同一個(gè) watcher 被多次觸發(fā)渔工，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的桥温。
例如引矩，當(dāng)你設(shè)置 vm.someData = 'new value'，該組件不會(huì)立即重新渲染。當(dāng)刷新隊(duì)列時(shí)旺韭，組件會(huì)在下一個(gè)事件循環(huán)“tick”中更新氛谜。多數(shù)情況我們不需要關(guān)心這個(gè)過程，但是如果你想基于更新后的 DOM 狀態(tài)來做點(diǎn)什么区端，這就可能會(huì)有些棘手值漫。雖然 Vue.js 通常鼓勵(lì)開發(fā)人員使用“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM织盼，但是有時(shí)我們必須要這么做杨何。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)沥邻。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用危虱。
3 實(shí)例分析
自己實(shí)現(xiàn)一個(gè)響應(yīng)式實(shí)例，完整代碼為：
const Observer = function(data) {
for (let key in data) {
defineReactive(data, key);
}
};
const defineReactive = function(obj, key) {
const dep = new Dep();
let val = obj[key];
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
console.log('in get');
dep.depend();
return val;
},
set(newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify();
}
});
};
const observe = function(data) {
return new Observer(data);
};
const Vue = function(options) {
const self = this;
if (options && typeof options.data === 'function') {
this._data = options.data.apply(this);
}
this.mount = function() {
return new Watcher(self, self.render);
};
this.render = function() {
// 在 Vue 的 render 函數(shù)中唐全，我們調(diào)用了本次渲染相關(guān)的值埃跷，self._data.text
// 所以，與渲染無關(guān)的值邮利，并不會(huì)觸發(fā) get弥雹，
// 也就不會(huì)在依賴收集器中添加到監(jiān)聽(addSub 方法不會(huì)觸發(fā))，
// 即使調(diào)用 set 賦值延届，notify 中的 subs 也是空的剪勿。
// 例如：下文的 vue._data.text2 = '123'; 因?yàn)?render 函數(shù)中沒有獲取該屬性，
// 也就是沒有觸發(fā) get 方法祷愉，則沒有對(duì)該屬性進(jìn)行監(jiān)聽
// self._data.text2; 只要有調(diào)用就會(huì)進(jìn)行監(jiān)聽窗宦，并不需要返回
return {
text: self._data.text // 觸發(fā) get 方法，則會(huì)在依賴收集器 Dep 中添加到監(jiān)聽
// text3: 'ssds' // 不會(huì)觸發(fā) get 方法
};
};
observe(this._data);
};
const Watcher = function(vm, fn) {
const self = this;
this.vm = vm;
Dep.target = this; // 將收集器的目標(biāo)指向了當(dāng)前 Watcher
this.addDep = function(dep) {
dep.addSub(self);
};
this.update = function() {
console.log('in watcher update');
fn();
};
this.value = fn();
Dep.target = null;
};
const Dep = function() {
const self = this;
this.target = null;
this.subs = [];
this.depend = function() {
if (Dep.target) {
console.log('Dep.target');
console.log(Dep.target);
Dep.target.addDep(self);
}
};
this.addSub = function(watcher) {
self.subs.push(watcher);
};
this.notify = function() {
for (let i = 0; i < self.subs.length; i += 1) {
self.subs[i].update();
}
};
};
const vue = new Vue({
data() {
return {
text2: 'hello worlds',
text: 'hello world'
};
}
});
vue.mount(); // in get
vue._data.text = '123'; // in watcher update /n in get
vue._data.text2 = '123';
說明：主要對(duì)象有 Vue二鳄、Observer赴涵、Watcher、Dep订讼；
Vue 主要 mount髓窜、render 方法，mount 調(diào)用 Watcher 欺殿，render 觸發(fā) Object.defineProperty 中 get 方法寄纵；
Observer 對(duì) data 中的屬性，使用 Object.defineProperty 定義 set 和 get脖苏；
Watcher 主要 addDep程拭、update 方法，第一次觸發(fā) fn()棍潘，調(diào)用 render 方法恃鞋，然后觸發(fā) get 方法崖媚；
Dep 主要 depend、addSub恤浪、notify 方法畅哑，depend 添加依賴，notify 被 set 調(diào)用水由，觸發(fā) Watcher update 方法荠呐。
實(shí)例思路導(dǎo)圖：
