快捷導(dǎo)航

Vue.js中的computed工作原理

更新時(shí)間：2018年03月22日 10:46:56 作者：JeffChen

這篇文章，我們通過實(shí)現(xiàn)一個(gè)簡單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對(duì)Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧

JS屬性：

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

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的一個(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è)簡化版的如何添加響應(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';
}
// 設(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è)簡單的 defineComputed 函數(shù)，它支持調(diào)用計(jì)算方法，但目前不需要它支持 updateCallback 。

function defineComputed (obj, key, computeFunc, updateCallback) {
 Object.defineProperty (obj, key, {
  get: function () {
   // 執(zhí)行計(jì)算函數(shù)并且返回值
   return computeFunc ();
  },
  set: 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)

讓我們增加一個(gè)全局變量 Dep ：

var Dep = {
 target: null
};

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

function defineComputed (obj, key, computeFunc, updateCallback) {
 var onDependencyUpdated = function () {
  // TODO
 }
 Object.defineProperty (obj, key, {
  get: function () {
   // 將onDependencyUpdated 這個(gè)函數(shù)傳給Dep.target
   Dep.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 ();
   });
  }
 })
};

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

var onDependencyUpdated = function () {
 // 再次計(jì)算 計(jì)算屬性的值
 var value = computeFunc ();
 updateCallback (value);
}

把它們整合到一起：

讓我們重新訪問我們的計(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)
 }
});
console.log ("Status is ", person.status);

總結(jié)

以上所述是小編給大家介紹的Vue.js中的computed工作原理，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: