解析Vue.js中的computed工作原理
我們通過實現一個簡單版的和Vue中computed具有相同功能的函式來了解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);
結語
感謝您的觀看,如有不足之處,歡迎批評指正。