前言

Vue的數(shù)據(jù)響應(yīng)主要是依賴了Object.defineProperty()，那么整個(gè)過程是怎么樣的呢？以我們自己的想法來走Vue的道路，其實(shí)也就是以Vue的原理為終點(diǎn)，我們來逆推一下實(shí)現(xiàn)過程。

本文代碼皆為低配版本，很多地方都不嚴(yán)謹(jǐn)，比如 if(typeof obj === 'object')這是在判斷obj是否為為一個(gè)對(duì)象，雖然obj也有可能是數(shù)組等其他類型的數(shù)據(jù)，但是本文為了簡(jiǎn)便，就直接這樣寫來表示判斷對(duì)象，對(duì)于數(shù)組使用Array.isArray()。

改造數(shù)據(jù)

我們先來嘗試寫一個(gè)函數(shù)，用于改造對(duì)象：

為什么要先寫這個(gè)函數(shù)呢？ 因?yàn)楦脑鞌?shù)據(jù)是一個(gè)最基礎(chǔ)也是最重要的步驟,之后所有的步驟都會(huì)依賴這一步。

// 代碼 1.1
function defineReactive (obj,key,val) {
 Object.defineProperty(obj,key,{
  enumerable: true,
  configurable: true,
  get: function () {
   return val;
  },
  set: function (newVal) {
   //判斷新值與舊值是否相等
   //判斷的后半段是為了驗(yàn)證新值與舊值都為NaN的情況 NaN不等于自身
   if(newVal === val || (newVal !== newVal && value !== value)){
    return ;
   }
   val = newVal;
  }
 });
}

例如const obj = {},然后再調(diào)用defineReactive(obj,'a',2)方法，此時(shí)在函數(shù)內(nèi)，val=2，然后每次獲取obj.a的值的時(shí)候都是獲取val的值，設(shè)置obj.a的時(shí)候也是設(shè)置val的值。（每次調(diào)用defineReactive都會(huì)產(chǎn)生一個(gè)閉包保存了val的值）;

流程討論

經(jīng)過驗(yàn)證之后，發(fā)現(xiàn)這個(gè)函數(shù)確實(shí)可以使用的。然后我們來討論一下響應(yīng)的流程：

1. 輸入數(shù)據(jù)
2. 改造數(shù)據(jù)（defineReactive()）
3. 如果數(shù)據(jù)變動(dòng) => 觸發(fā)事件

我們來看第三步，數(shù)據(jù)變動(dòng)如何觸發(fā)之后的事件呢？仔細(xì)思考一下，如果要改變數(shù)據(jù)，那么必須先set數(shù)據(jù)，那么我們直接set()里面添加方法就ok了呀。

然后還有一個(gè)重要問題：

依賴收集

我們?cè)趺粗罃?shù)據(jù)改變之后要觸發(fā)的是什么事件呢？在Vue中：

使用數(shù)據(jù) => 視圖； 使用了數(shù)據(jù)來渲染視圖，那么在獲取數(shù)據(jù)的時(shí)候收集依賴是最佳的時(shí)機(jī)，Vue在改造數(shù)據(jù)屬性的時(shí)候生成一個(gè)Dep實(shí)例，用于收集依賴。

// 代碼 1.2
class Dep {
 constructor(){
  //訂閱的信息
  this.subs = [];
 }

 addSub(sub){
  this.subs.push(sub);
 }

 removeSub (sub) {
  remove(this.subs, sub);
 }

 //此方法的作用等同于 this.subs.push(Watcher);
 depend(){
  if (Dep.target) {
   Dep.target.addDep(this);
  }
 }
 //這個(gè)方法就是發(fā)布通知了 告訴你 有改變啦
 notify(){
  const subs = this.subs.slice()
  for (let i = 0, l = subs.length; i < l; i++) {
   subs[i].update();
  }
 }
}
Dep.target = null;

代碼1.2就是Dep的部分代碼，暫時(shí)只需要知道2個(gè)方法的作用就可以了

1. depend() --- 可以理解為收集依賴的事件，不考慮其他方面的話 功能等同于addSub()
2. notify() --- 這個(gè)方法更為直觀了，執(zhí)行所有依賴的update()方法。就是之后的改變視圖啊 等等。

本篇主要討論數(shù)據(jù)響應(yīng)的過程，不深入討論 Watcher類，所以Dep中的方法知道作用就可以了。

然后就是改變代碼1.1了

//代碼 1.3
function defineReactive (obj,key,val) {
 const dep = new Dep();

 Object.defineProperty(obj,key,{
  enumerable: true,
  configurable: true,
  get: function () {
   if(Dep.target){
    //收集依賴 等同于 dep.addSub(Dep.target)
    dep.depend()
   }
   return val;
  },
  set: function (newVal) {
   if(newVal === val || (newVal !== newVal && val !== val)){
    return ;
   }
   val = newVal;
   //發(fā)布改變
   dep.notify();
  }
 });
}

這代碼中有一個(gè)疑點(diǎn)，Dep.target是什么？為什么要有Dep.target才會(huì)收集依賴呢？

1. Dep是一個(gè)類，Dep.target是類的屬性，并不是dep實(shí)例的屬性。
2. Dep類在全局可用，所以Dep.target在全局能訪問到，可以任意改變它的值。
3. get這個(gè)方法使用很平常，不可能每次使用獲取數(shù)據(jù)值的時(shí)候都去調(diào)用dep.depend()。
4. dep.depend()實(shí)際上就是dep.addSub(Dep.target)。
5. 那么最好方法就是，在使用之前把Dep.target設(shè)置成某個(gè)對(duì)象，在訂閱完成之后設(shè)置Dep.target = null。

驗(yàn)證

是時(shí)候來驗(yàn)證一波代碼的可用性了

//代碼 1.4

const obj = {};//這一句是不是感覺很熟悉 就相當(dāng)于初始化vue的data ---- data:{obj:{}};

//低配的不能再低配的watcher對(duì)象（源碼中是一個(gè)類，我這用一個(gè)對(duì)象代替了）
const watcher = {
 addDep:function (dep) {
  dep.addSub(this);
 },
 update:function(){
  html();
 }
}
//假裝這個(gè)是渲染頁面的
function html () {
 document.querySelector('body').innerHTML = obj.html;
}
defineReactive(obj,'html','how are you');//定義響應(yīng)式的數(shù)據(jù)

Dep.target = watcher;
html();//第一次渲染界面
Dep.target = null;

此時(shí)瀏覽器上的界面是這樣的

然后在下打開了控制臺(tái)開始調(diào)試，輸入：

obj.html = 'I am fine thank you'

然后就發(fā)現(xiàn)，按下回車的那一瞬間，奇跡發(fā)生了，頁面變成了

結(jié)尾

Vue數(shù)據(jù)響應(yīng)的設(shè)計(jì)模式和訂閱發(fā)布模式有一點(diǎn)像，但是不同，每一個(gè)dep實(shí)例就是一個(gè)訂閱中心，每一次發(fā)布都會(huì)把所有的訂閱全部發(fā)布出去。

Vue的響應(yīng)式原理其實(shí)還有很大一部分，本文主要討論了Vue是如何讓數(shù)據(jù)進(jìn)行響應(yīng)，但是實(shí)際上，一般的數(shù)據(jù)都是很多的，一個(gè)數(shù)據(jù)被多處使用，改變數(shù)據(jù)之后觀察新值，如何觀察、如何訂閱、如何調(diào)度，都還有很大一部分沒有討論。主要的三個(gè)類Dep（收集依賴）、Observer（觀察數(shù)據(jù)）、Watcher（訂閱者，若數(shù)據(jù)有變化通知訂閱者），都只提了一點(diǎn)點(diǎn)。

之前寫有一篇Vue響應(yīng)式----數(shù)組變異方法，針對(duì)Vue中對(duì)數(shù)組的改造進(jìn)行討論。當(dāng)然之后有更多其他的文章，整個(gè)數(shù)據(jù)響應(yīng)流程還有很多內(nèi)容，三個(gè)主要的類都還沒有討論完。

其實(shí)閱讀源碼不僅僅是為了知道源碼是如何工作的，更重要的是學(xué)習(xí)作者的思路與方法，我寫的文章都不長(zhǎng)，希望自己能夠每次專注一個(gè)點(diǎn)，能夠真真實(shí)實(shí)領(lǐng)悟到這一個(gè)點(diǎn)的原理。當(dāng)然也想控制閱讀時(shí)間，免得大家看到一半就關(guān)閉了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論