我們通過實現一個簡單版的和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 ();},//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860set: 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}//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860Object.defineProperty (obj, key, {get: function () {// 將onDependencyUpdated 這個函數傳給Dep.targetDep.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);

結語

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

原文地址：https://segmentfault.com/a/1190000017356237

轉載于:https://www.cnblogs.com/lalalagq/p/10114353.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的解析Vue.js中的computed工作原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。