我們通過實現一個簡單版的和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，快速升職加薪，走上人生巔峰。