解析Vue.js中的computed工作原理

前端攻城老溼發表於2018-12-12

我們通過實現一個簡單版的和Vue中computed具有相同功能的函式來了解computed是如何工作的。寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。

解析Vue.js中的computed工作原理

JS屬性:

JavaScript有一個特性是 Object.defineProperty ,它能做很多事,但我在這篇文章只專注於這個方法中的一個:

var person = {};
Object.defineProperty (person, 'age', {
 get: function () {
  console.log ("Getting the age");
  return 25;
 }
});//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
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;
  }
 })
};
// 建立一個物件
var person = {};
// 新增可響應的屬性"age""country"
defineReactive (person, 'age', 25);
defineReactive (person, 'country', 'Brazil');
// 現在你可以隨意使用person.age了
if (person.age < 18) {
 return 'minor';
}
else {
 return 'adult';
}//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
// 設定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 ();
  },//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
  set: function () {
   // 什麼也不做,不需要設定計算屬性的值
  }
 })
}
複製程式碼

這個函式有兩個問題: 每次訪問計算屬性時都會執行一次計算函式 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 函式:

function defineComputed (obj, key, computeFunc, updateCallback) {
 var onDependencyUpdated = function () {
  // TODO
 }//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
 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
  }//面向1-3年前端人員
 })
};
複製程式碼

我們可以在計算屬性定義的函式觸發更新回撥後更新 onDependencyUpdated 函式。

var onDependencyUpdated = function () {
 // 再次計算 計算屬性的值
 var value = computeFunc ();
 updateCallback (value);
}//歡迎加入前端全棧開發交流圈一起學習交流:864305860
複製程式碼

把它們整合到一起: 讓我們重新訪問我們的計算屬性 person.status :

person.age = 22;
defineComputed (
 person,
 'status',
 function () {
  if (person.age > 18) {
   return 'adult';
  }
 },
 function (newValue) {
  console.log ("status has changed to", newValue)
 }//歡迎加入前端全棧開發交流圈一起學習交流:864305860
});
console.log ("Status is ", person.status);
複製程式碼

結語

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

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

相關文章