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 () {   // 什么也不做，不需要設定計算屬性的值  } })}