我們通過實(shí)現(xiàn)一個(gè)簡(jiǎn)單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。寫的十分的全面細(xì)致，具有一定的參考價(jià)值，對(duì)此有需要的朋友可以參考學(xué)習(xí)下。如有不足之處，歡迎批評(píng)指正。

JS屬性：

JavaScript有一個(gè)特性是 Object.defineProperty ,它能做很多事，但我在這篇文章只專注于這個(gè)方法中的一個(gè)：

var person = {}; Object.defineProperty (person, 'age', {get: function () {console.log ("Getting the age");return 25;} });//歡迎加入前端全棧開發(fā)交流圈一起吹水聊天學(xué)習(xí)交流：864305860 console.log ("The age is ", person.age); // Prints: // // Getting the age // The age is 25

(Obeject.defineProperty是Object的一個(gè)方法，第一個(gè)參數(shù)是對(duì)象名稱，第二個(gè)參數(shù)是要設(shè)置的屬性名，第三個(gè)參數(shù)是一個(gè)對(duì)象，它可以設(shè)置這個(gè)屬性是否可修改、可寫等，而這篇文章主要使用的是Obeject.defineProperty的訪問器屬性，感興趣的朋友可以自行g(shù)oogle或者查看Js高及程序設(shè)計(jì))
盡管 person.age 看起來像是訪問了對(duì)象的一個(gè)屬性，但其實(shí)在內(nèi)部我們是運(yùn)行了一個(gè)函數(shù)。

一個(gè)基本可響應(yīng)的Vue.js

Vue.js內(nèi)部構(gòu)建了一個(gè)可以將普通的對(duì)象轉(zhuǎn)化為可以被觀察的值（ 響應(yīng)屬性 ），下面為大家展示一個(gè)簡(jiǎn)化版的如何添加響應(yīng)屬性的案例：

function defineReactive (obj, key, val) {Object.defineProperty (obj, key, {get: function () {return val;},set: function (newValue) {val = newValue;}}) }; // 創(chuàng)建一個(gè)對(duì)象 var person = {}; // 添加可響應(yīng)的屬性"age"和"country" defineReactive (person, 'age', 25); defineReactive (person, 'country', 'Brazil'); // 現(xiàn)在你可以隨意使用person.age了 if (person.age < 18) {return 'minor'; } else {return 'adult'; }//歡迎加入前端全棧開發(fā)交流圈一起吹水聊天學(xué)習(xí)交流：864305860 // 設(shè)置person.country的值 person.country = 'Russia';

有趣的是， 25 和 ‘Brazil' 還是一個(gè)閉包內(nèi)部的變量，只有當(dāng)賦給它們新值的時(shí)候 val 才會(huì)改變。 person.country 并不擁有 'Brazil' 這個(gè)值，而是getter這個(gè)函數(shù)擁有 'Brazil' 這個(gè)值。

聲明一個(gè)計(jì)算屬性

讓我們創(chuàng)建一個(gè)定義計(jì)算屬性的函數(shù) defineComputed 。這個(gè)函數(shù)就跟大家平時(shí)使用computed時(shí)的一樣。

defineComputed (person, // 計(jì)算屬性就聲明在這個(gè)對(duì)象上'status', // 計(jì)算屬性的名稱function () { // 實(shí)際返回計(jì)算屬性值的函數(shù)console.log ("status getter called")if (person.age < 18) {return 'minor';}else {return 'adult';}},function (newValue) {// 當(dāng)計(jì)算屬性值更新時(shí)調(diào)用的函數(shù)console.log ("status has changed to", newValue)} }); // 我們可以像使用一般的屬性一樣使用計(jì)算屬性 console.log ("The person's status is: ", person.status);

讓我們寫一個(gè)簡(jiǎn)單的 defineComputed 函數(shù)，它支持調(diào)用計(jì)算方法，但目前不需要它支持 updateCallback

function defineComputed (obj, key, computeFunc, updateCallback) {Object.defineProperty (obj, key, {get: function () {// 執(zhí)行計(jì)算函數(shù)并且返回值return computeFunc ();},//歡迎加入前端全棧開發(fā)交流圈一起吹水聊天學(xué)習(xí)交流：864305860set: function () {// 什么也不做，不需要設(shè)定計(jì)算屬性的值}}) }

這個(gè)函數(shù)有兩個(gè)問題：
每次訪問計(jì)算屬性時(shí)都會(huì)執(zhí)行一次計(jì)算函數(shù) computeFunc ()
它不知道什么時(shí)候更新 （即當(dāng)我們更新某個(gè)data中的屬性，計(jì)算屬性中也會(huì)更新這個(gè)data屬性）

// 我希望最終函數(shù)執(zhí)行后是這個(gè)效果：每當(dāng)person.age更新值的時(shí)候，person.status也同步更新 person.age = 17; // console: status 的值為 minor person.age = 22; // console: status 的值為 adult

增加一個(gè)依賴項(xiàng)

讓我們?cè)黾右粋€(gè)全局變量 Dep ：

var Dep = {target: null };

這是一個(gè)依賴項(xiàng)，接著我們用一個(gè)騷操作來更新 defineComputed 函數(shù)：

function defineComputed (obj, key, computeFunc, updateCallback) {var onDependencyUpdated = function () {// TODO}//歡迎加入前端全棧開發(fā)交流圈一起吹水聊天學(xué)習(xí)交流：864305860Object.defineProperty (obj, key, {get: function () {// 將onDependencyUpdated 這個(gè)函數(shù)傳給Dep.targetDep.target = onDependencyUpdated;var value = computeFunc ();Dep.target = null;},set: function () {// 什么也不做，不需要設(shè)定計(jì)算屬性的值}}) }

現(xiàn)在讓我們回到之前設(shè)置的響應(yīng)屬性上：

function defineReactive (obj, key, val) {// 所有的計(jì)算屬性都依賴這個(gè)數(shù)組var deps = [];Object.defineProperty (obj, key, {get: function () {// 檢查是否調(diào)用了計(jì)算屬性，如果調(diào)用了，Department.target將等于一個(gè)onDependencyUpdated函數(shù)if (Dep.target) {// 把onDependencyUpdated函數(shù)push到deos中deps.push (target);}return val;},set: function (newValue) {val = newValue;// 通知所有的計(jì)算屬性，告訴它們有個(gè)響應(yīng)屬性更新了deps.forEach ((changeFunction) => {changeFunction ();});//歡迎加入前端全棧開發(fā)交流圈一起吹水聊天學(xué)習(xí)交流：864305860}//面向1-3年前端人員}) };

我們可以在計(jì)算屬性定義的函數(shù)觸發(fā)更新回調(diào)后更新 onDependencyUpdated 函數(shù)。

var onDependencyUpdated = function () {// 再次計(jì)算 計(jì)算屬性的值var value = computeFunc ();updateCallback (value); }//歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流：864305860

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

person.age = 22; defineComputed (person,'status',function () {if (person.age > 18) {return 'adult';}},function (newValue) {console.log ("status has changed to", newValue)}//歡迎加入前端全棧開發(fā)交流圈一起學(xué)習(xí)交流：864305860 }); console.log ("Status is ", person.status);

結(jié)語

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/10114353.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。