深刻解析Vue中的computed工做原理

咱們經過實現一個簡單版的和Vue中computed具備相同功能的函數來了解computed是如何工做的。

JS屬性： JavaScript有一個特性是 Object.defineProperty ,它能作不少事，但我在這篇文章只專一於這個方法中的一個：

var person = {};
Object.defineProperty (person, 'age', {
 get: function () {
  console.log ("Getting the age");
  return 25;
 }
});
console.log ("The age is ", person.age);
// Prints:
//
// Getting the age
// The age is 25
複製代碼

(Obeject.defineProperty是Object的一個方法，第一個參數是對象名稱，第二個參數是要設置的屬性名，第三個參數是一個對象，它能夠設置這個屬性是否可修改、可寫等，而這篇文章主要使用的是Obeject.defineProperty的訪問器屬性，感興趣的朋友能夠自行google或者查看Js高及程序設計) 儘管 person.age 看起來像是訪問了對象的一個屬性，但其實在內部咱們是運行了一個函數。 一個基本可響應的Vue.js Vue.js內部構建了一個能夠將普通的對象轉化爲能夠被觀察的值（ 響應屬性 ），下面爲你們展現一個簡化版的如何添加響應屬性的案例：

function defineReactive (obj, key, val) {
 Object.defineProperty (obj, key, {
  get: function () {
   return val;
  },
  set: function (newValue) {
   val = newValue;
  }//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
 })
};
// 建立一個對象
var person = {};
// 添加可響應的屬性"age"和"country"
defineReactive (person, 'age', 25);
defineReactive (person, 'country', 'Brazil');
// 如今你能夠隨意使用person.age了
if (person.age < 18) {
 return 'minor';
}//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
else {
 return 'adult';
}
// 設置person.country的值
person.country = 'Russia';
複製代碼

25 和 ‘Brazil' 仍是一個閉包內部的變量，只有當賦給它們新值的時候 val 纔會改變。 person.country 並不擁有 'Brazil' 這個值，而是getter這個函數擁有 'Brazil' 這個值。 聲明一個計算屬性 讓咱們建立一個定義計算屬性的函數 defineComputed 。這個函數就跟你們平時使用computed時的同樣。

defineComputed (
 person, // 計算屬性就聲明在這個對象上
 'status', // 計算屬性的名稱
 function () { // 實際返回計算屬性值的函數
  console.log ("status getter called")
  if (person.age < 18) {
   return 'minor';
  }
  else {
   return 'adult';
  }
 },
 function (newValue) {
  // 當計算屬性值更新時調用的函數
  console.log ("status has changed to", newValue)
 }
});
// 咱們能夠像使用通常的屬性同樣使用計算屬性
console.log ("The person's status is: ", person.status);
複製代碼

寫一個簡單的 defineComputed 函數，它支持調用計算方法，但目前不須要它支持 updateCallback

function defineComputed (obj, key, computeFunc, updateCallback) {
 Object.defineProperty (obj, key, {
  get: function () {
   // 執行計算函數而且返回值
   return computeFunc ();
  },
  set: function () {
   // 什麼也不作，不須要設定計算屬性的值
  }//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
 })
}//幫助突破技術瓶頸，提高思惟能力
複製代碼

這個函數有兩個問題： 每次訪問計算屬性時都會執行一次計算函數 computeFunc () 它不知道何時更新 （即當咱們更新某個data中的屬性，計算屬性中也會更新這個data屬性）

// 我但願最終函數執行後是這個效果：每當person.age更新值的時候，person.status也同步更新
person.age = 17;
// console: status 的值爲 minor
person.age = 22;
// console: status 的值爲 adult
複製代碼

增長一個依賴項 讓咱們增長一個全局變量 Dep ：

var Dep = {
 target: null
};
複製代碼

這是一個依賴項，接着咱們用一個騷操做來更新 defineComputed 函數：

var onDependencyUpdated = function () {
  // TODO
 }
 Object.defineProperty (obj, key, {
  get: function () {
   // 將onDependencyUpdated 這個函數傳給Dep.target
   Dep.target = onDependencyUpdated;
   var value = computeFunc ();
   Dep.target = null;
  },//幫助突破技術瓶頸，提高思惟能力
  set: function () {
   // 什麼也不作，不須要設定計算屬性的值
  }
 })
}
複製代碼

回到以前設置的響應屬性上：

function defineReactive (obj, key, val) {
 // 全部的計算屬性都依賴這個數組
 var deps = []; 
 Object.defineProperty (obj, key, {
  get: function () {
   // 檢查是否調用了計算屬性，若是調用了，Department.target將等於一個onDependencyUpdated函數
   if (Dep.target) {
    // 把onDependencyUpdated函數push到deos中
    deps.push (target);
   }
   return val;
  },
  set: function (newValue) {
   val = newValue
   // 通知全部的計算屬性，告訴它們有個響應屬性更新了
   deps.forEach ((changeFunction) => {
    changeFunction ();
   });//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
  }//幫助突破技術瓶頸，提高思惟能力
 })
};
複製代碼

能夠在計算屬性定義的函數觸發更新回調後更新 onDependencyUpdated 函數。

var onDependencyUpdated = function () {
 // 再次計算 計算屬性的值
 var value = computeFunc ();
 updateCallback (value);
}
複製代碼

把它們整合到一塊兒,從新訪問咱們的計算屬性 person.status :

person.age = 22;
defineComputed (
 person,
 'status',
 function () {
  if (person.age > 18) {
   return 'adult';
  }//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
 },//幫助突破技術瓶頸，提高思惟能力
 function (newValue) {
  console.log ("status has changed to", newValue)
 }
});
console.log ("Status is ", person.status);
複製代碼

結語

感謝您的觀看，若有不足之處，歡迎批評指正。

本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。 最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。