小編給大家分享一下Vue數(shù)據(jù)響應(yīng)式的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的昭陽網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

什么是數(shù)據(jù)響應(yīng)式

從一開始使用 Vue 時，對于之前的 jq 開發(fā)而言，一個很大的區(qū)別就是基本不用手動操作 dom，data 中聲明的數(shù)據(jù)狀態(tài)改變后會自動重新渲染相關(guān)的 dom。
換句話說就是 Vue 自己知道哪個數(shù)據(jù)狀態(tài)發(fā)生了變化及哪里有用到這個數(shù)據(jù)需要隨之修改。

因此實現(xiàn)數(shù)據(jù)響應(yīng)式有兩個重點問題：

1. 如何知道數(shù)據(jù)發(fā)生了變化？

2. 如何知道數(shù)據(jù)變化后哪里需要修改？

對于第一個問題，如何知道數(shù)據(jù)發(fā)生了變化，Vue3 之前使用了 ES5 的一個 API Object.defineProperty Vue3 中使用了 ES6 的 Proxy，都是對需要偵測的數(shù)據(jù)進行 變化偵測 ，添加 getter 和 setter ，這樣就可以知道數(shù)據(jù)何時被讀取和修改。

第二個問題，如何知道數(shù)據(jù)變化后哪里需要修改，Vue 對于每個數(shù)據(jù)都收集了與之相關(guān)的 依賴 ，這里的依賴其實就是一個對象，保存有該數(shù)據(jù)的舊值及數(shù)據(jù)變化后需要執(zhí)行的函數(shù)。每個響應(yīng)式的數(shù)據(jù)變化時會遍歷通知其對應(yīng)的每個依賴，依賴收到通知后會判斷一下新舊值有沒有發(fā)生變化，如果變化則執(zhí)行回調(diào)函數(shù)響應(yīng)數(shù)據(jù)變化（比如修改 dom）。

下面詳細分別介紹 Vue2 及 Vue3 的數(shù)據(jù)變化偵測及依賴收集。

Vue2

變化偵測

Object 的變化偵測

轉(zhuǎn)化響應(yīng)式數(shù)據(jù)需要將 Vue 實例上 data 屬性中定義的數(shù)據(jù)通過遞歸將所有屬性都轉(zhuǎn)化為 getter/setter 的形式，Vue 中定義了一個 Observer 類來做這個事情。

function def(obj, key, val, enumerable) {
 Object.defineProperty(obj, key, {
  value: val,
  enumerable: !!enumerable,
  writable: true,
  configurable: true
 })
}

class Observer {
 constructor(value) {
  this.value = value;
  def(value, '__ob__', this);
  if (!Array.isArray(value)) {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

直接將一個對象傳入 new Observer() 后就對每項屬性都調(diào)用 defineReactive 函數(shù)添加變化偵測，下面定義這個函數(shù)：

function defineReactive(data, key, val) {
 let childOb = observe(val);
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   // 讀取 data[key] 時觸發(fā)
   console.log('getter', val);
   return val;
  },
  set: function (newVal) {
   // 修改 data[key] 時觸發(fā)
   console.log('setter', newVal);
   if (val === newVal) {
    return;
   }
   val = newVal;
  }
 })
}

function observe(value, asRootData) {
 if (typeof val !== 'object') {
  return;
 }
 let ob;
 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  ob = value.__ob__;
 } else {
  ob = new Observer(val);
 }
 return ob;
}

函數(shù)中判斷如果是對象則遞歸調(diào)用 Observer 來實現(xiàn)所有屬性的變化偵測，根據(jù) __ob__ 屬性判斷是否已處理過，防止多次重復(fù)處理，Observer 處理過后會給數(shù)據(jù)添加這個屬性，下面寫一個對象試一下：

const people = {
 name: 'c',
 age: 12,
 parents: {
  dad: 'a',
  mom: 'b'
 },
 mates: ['d', 'e']
};
new Observer(people);
people.name; // getter c
people.age++; // getter 12 setter 13
people.parents.dad; // getter {} getter a

打印 people 可以看到所有屬性添加了 getter/setter 方法，讀取 name 屬性時打印了 people.age++ 修改 age 時打印了 getter 12 setter 13 說明 people 的屬性已經(jīng)被全部成功代理監(jiān)聽。

Array 的變化偵測

可以看到前面 Observer 中僅對 Object 類型個數(shù)據(jù)做了處理，為每個屬性添加了 getter/setter，處理后如果屬性值中有數(shù)組，通過 屬性名 + 索引 的方式（如：this.people.mates[0]）獲取也是會觸發(fā) getter 的。但是如果通過數(shù)組原型方法修改數(shù)組的值，如 this.people.mates.push('f')，這樣是無法通過 setter 偵測到的，因此，在 Observer 中需要對 Object 和 Array 分別進行單獨的處理。

為偵測到數(shù)組原型方法的操作，Vue 中是通過創(chuàng)建一個攔截器 arrayMethods，并將攔截器重新掛載到數(shù)組的原型對象上。

下面是攔截器的定義：

const ArrayProto = Array.prototype;
const arrayMethods = Object.create(ArrayProto);
;[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
].forEach(method => {
 const original = ArrayProto[method];
 Object.defineProperty(arrayMethods, method, {
  value: function mutator(...args) {
   console.log('mutator:', this, args);
   return original.apply(this, args);
  },
  enumerable: false,
  writable: true,
  configurable: true
 })
})

這里 arrayMethods 繼承了 Array 的原型對象 Array.prototype，并給它添加了 push pop shift unshift splice sort reverse 這些方法，因為數(shù)組是可以通過這些方法進行修改的。添加的 push pop... 方法中重新調(diào)用 original（緩存的數(shù)組原型方法），這樣就不會影響數(shù)組本身的操作。

最后給 Observer 中添加數(shù)組的修改：直接將攔截器掛載到數(shù)組原型對象上

class Observer {
 constructor(value) {
  this.value = value;
  def(value, '__ob__', this);
  if (Array.isArray(value)) {
   value.__proto__ = arrayMethods;
  } else {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

再來驗證一下：

const people = {
 name: 'c',
 age: 12,
 parents: {
  dad: 'a',
  mom: 'b'
 },
 mates: ['d', 'e']
};
new Observer(people);
people.mates[0]; // getter (2) ["d", "e"]
people.mates.push('f'); // mutator: (2) ["d", "e"] ["f"]

現(xiàn)在數(shù)組的修改也能被偵測到了。

依賴收集

目前已經(jīng)可以對 Object 及 Array 數(shù)據(jù)的變化進行截獲，那么開始考慮一開始提到的 Vue 響應(yīng)式數(shù)據(jù)的第二個問題：如何知道數(shù)據(jù)變化后哪里需要修改？

最開始已經(jīng)說過，Vue 中每個數(shù)據(jù)都需要收集與之相關(guān)的依賴，用來表示該數(shù)據(jù)變化時需要進行的操作行為。

通過數(shù)據(jù)的變化偵測我們可以知道數(shù)據(jù)何時被讀取或修改，因此可以在數(shù)據(jù)讀取時收集依賴，修改時通知依賴更新，這樣就可以實現(xiàn)數(shù)據(jù)響應(yīng)式了。

依賴收集在哪

為每個數(shù)據(jù)都創(chuàng)建一個收集依賴的對象 dep，對外暴露 depend（收集依賴）、notify（通知依賴更新）的兩個方法，內(nèi)部維護了一個數(shù)組用來保存該數(shù)據(jù)的每項依賴。

對于 Object，可以在 getter 中收集，setter 中通知更新，對 defineReactive 函數(shù)修改如下：

function defineReactive(data, key, val) {
 let childOb = observe(val);
 // 處理每個響應(yīng)式數(shù)據(jù)時都創(chuàng)建一個對象用來收集依賴
 let dep = new Dep();
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   // 收集依賴
   dep.depend();
   return val;
  },
  set: function (newVal) {
   if (val === newVal) {
    return;
   }
   val = newVal;
   // 通知依賴更新
   dep.notify();
  }
 })
}

上面代碼中依賴是收集在一個 Dep 實例對象上的，下面看一下 Dep 這個類。

class Dep {
 constructor() {
  this.subs = [];
 }
 addSub(sub) {
  this.subs.push(sub);
 }
 removeSub(sub) {
  if (this.subs.length) {
   const index = this.subs.indexOf(sub);
   this.subs.splice(index, 1);
  }
 }
 depend() {
  if (window.target) {
   this.addSub(window.target);
  }
 }
 notify() {
  const subs = this.subs.slice();
  for (let i = 0; i < subs.length; i++) {
   subs[i].update();
  }
 }
}

Dep 的每個實例都有一個保存依賴的數(shù)組 subs，收集依賴時是從全局的一個變量上獲取到并插入 subs，通知依賴時就遍歷所有 subs 成員并調(diào)用其 update 方法。

Object 的依賴收集和觸發(fā)都是在 defineProperty 中進行的，因此 Dep 實例定義在 defineReactive 函數(shù)中就可以讓 getter 和 setter 都拿到。

而對于 Array 來說，依賴可以在 getter 中收集，但觸發(fā)卻是在攔截器中，為了保證 getter 和 攔截器中都能訪問到 Dep 實例，Vue 中給 Observer 實例上添加了 dep 屬性。

class Observer {
 constructor(value) {
  this.value = value;
  this.dep = new Dep();
  def(value, '__ob__', this);
  if (Array.isArray(value)) {
   value.__proto__ = arrayMethods;
  } else {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

Observer 在處理數(shù)據(jù)響應(yīng)式時也將自身實例添加到了數(shù)據(jù)的 __ob__ 屬性上，因此在 getter 和攔截器中都能通過響應(yīng)式數(shù)據(jù)本身的  __ob__.dep 拿到其對應(yīng)的依賴。修改 defineReactive 和 攔截器如下：

function defineReactive(data, key, val) {
 let childOb = observe(val);
 let dep = new Dep();
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   dep.depend();
   // 給 Observer 實例上的 dep 屬性收集依賴
   if (childOb) {
    childOb.dep.depend();
   }
   return val;
  },
  ...
 })
}

;[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
].forEach(method => {
 const original = ArrayProto[method];
 def(arrayMethods, method, (...args) => {
  const result = original.apply(this, args);
  const ob = this.__ob__;
  ob.dep.notify();
  return result;
 })
})

依賴長什么樣

現(xiàn)在已經(jīng)知道了依賴保存在每個響應(yīng)式數(shù)據(jù)對應(yīng)的 Dep 實例中的 subs 中，通過上面 Dep 的代碼可以知道，收集的依賴是一個全局對象，且該對象對外暴露了一個 update 方法，記錄了數(shù)據(jù)變化時需要進行的更新操作（如修改 dom 或 Vue 的 Watch）。

首先這個依賴對象的功能主要有兩點：

1. 需要主動將自己收集到對應(yīng)響應(yīng)式數(shù)據(jù)的 Dep 實例中；

2. 保存數(shù)據(jù)變化時要進行的操作并在 update 方法中調(diào)用；

其實就是一個中介角色，Vue 中起名為 Watcher。

class Watcher {
 constructor(vm, expOrFn, cb) {
  this.vm = vm;
  // 保存通過表達式獲取數(shù)據(jù)的方法
  this.getter = parsePath(expOrFn);
  this.cb = cb;
  this.value = this.get();
 }
 get() {
  // 將自身 Watcher 實例掛到全局對象上
  window.target = this;
  // 獲取表達式對應(yīng)的數(shù)據(jù)
  // 會自動觸發(fā)該數(shù)據(jù)的 getter
  // getter 中收集依賴時從全局對象上拿到這個 Watcher 實例
  let value = this.getter.call(this.vm, this.vm);
  window.target = undefined;
  return value;
 }
 update() {
  const oldValue = this.value;
  this.value = this.get();
  // 將舊值與新值傳遞給回調(diào)函數(shù)
  this.cb.call(this.vm, this.value, oldValue);
 }
}

對于第一點，主動將自己收集到 Dep 實例中，Watcher 中設(shè)計的非常巧妙，在 get 中將自身 Watcher 實例掛到全局對象上，然后通過獲取數(shù)據(jù)觸發(fā) getter 來實現(xiàn)依賴收集。

第二點實現(xiàn)很簡單，只需要將構(gòu)造函數(shù)參數(shù)中的回調(diào)函數(shù)保存并在 update 方法中調(diào)用即可。

構(gòu)造函數(shù)中的 parsePath 方法就是從 Vue 實例的 data 上通過表達式獲取數(shù)據(jù)，比如表達式為 "user.name" 則需要解析該字符串然后獲取 data.user.name 數(shù)據(jù)。

總結(jié)

• 數(shù)據(jù)先通過調(diào)用 new Observer() 為每項屬性添加變化偵測，并創(chuàng)建一個 Dep 實例用來保存相關(guān)依賴。在讀取屬性值時保存依賴，修改屬性值時通知依賴；

• Dep 實例的 subs 屬性為一個數(shù)組，保存依賴是向數(shù)組中添加，通知依賴時遍歷數(shù)組一次調(diào)用依賴的 update 方法；

• 依賴是一個 Watcher 實例，保存了數(shù)據(jù)變化時需要進行的操作，并將實例自身放到全局的一個位置，然后讀取數(shù)據(jù)觸發(fā)數(shù)據(jù)的 getter，getter 中從全局指定的位置獲取到該 Watcher 實例并收集在 Dep 實例中。

以上就是 Vue2 中的響應(yīng)式原理，在 Observer 處理完后，外界只需要通過創(chuàng)建 Watcher 傳入需要監(jiān)聽的數(shù)據(jù)及數(shù)據(jù)變化時的響應(yīng)回調(diào)函數(shù)即可。

Vue3

Vue3 中每個功能單獨為一個模塊，并可以單獨打包使用，本文僅簡單討論 Vue3 中與數(shù)據(jù)響應(yīng)式相關(guān)的 Reactive 模塊，了解其內(nèi)部原理，與 Vue2 相比又有何不同。

因為該模塊可以單獨使用，先來看一下這個模塊的用法示例：