Vue.js中的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;  } })};// 创建一个对象var person = {};// 添加可响应的属性"age"和"country"defineReactive (person, 'age', 25);defineReactive (person, 'country', 'Brazil');// 现在你可以随意使用person.age了if (person.age < 18) { return 'minor';}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 () {   // 什么也不做，不需要设定计算属性的值  } })}