計算屬性 具有什麼特性？

當我們定義一個 computed，其相依 data 一變，computed 也會隨之更新。

以一個會員資料頁面為例，他可能會需要不同的姓名顯示方式(姓與名不變，但呈現不同)。

<div id="userProfile">
  <p> 名字: {{ firstName }}</p>
  <p> 姓氏: {{ lastName }}</p>
  <p>{{ fullName }}</p>
  <p>{{ shortName }}</p>
</div>

var vm = new Vue({
  el: '#userProfile',
  data: {
    firstName: 'Ralph',
    lastName: 'Hsu'
  },
  computed: {
    fullName: function () {
    	return this.firstName + ' ' + this.user.lastName;
    },
    shortName: function() {
    	return this.firstName.split('')[0] + '. ' + this.lastName;
    }
  }
})

顯而易見的好處，幫你 收納 Template 中的邏輯，給予邏輯更為明確的命名。

<div id="userProfile">
  <p> 名字: {{ firstName }}</p>
  <p> 姓氏: {{ lastName }}</p>
  <!-- 我很醜，讓你無法很溫柔 -->
  <p>{{ this.firstName + ' ' + this.user.lastName }}</p>
  <p>{{ this.firstName.split('')[0] + '. ' + this.lastName }}</p>
</div>

Computed 跟 Watch 有什麼不同呢？

讓我們回想上一篇多個 Watcher 的寫法

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    /* 多的 */
    fullName: 'Foo Bar'
  },
  watch: {
    /* 多的 */
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

多了一個 fullName 屬性，而且其相依的屬性有幾個，就得多幾個 watcher 監聽。

聽起來 Watch 只有壞處嗎？
不完全是，它的彈性讓你很容易針對資料異動設callback。

    fullName: function(val, old) {
      /* 丞相起風了，資料有變 */
      if (val !== old) {
      		swtich(val) {
      			case '東':
      				this.go(); 
      				break;
      			case '西': 
      			case '南': 
      			case '北': 
      				this.noGo();
      		}
      }
    }

Computed 跟 method 有什麼不同呢？

拿前面的Watch範例說明，改成用 method 寫

<div id="demo">
  <p> 名字: {{ firstName }}</p>
  <p> 姓氏: {{ lastName }}</p>
  <p>{{ getFullName() }}</p>
</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
  },
  methods: {
  	getFullName: function() {
    	return this.firstName + ' ' + this.user.lastName;
  	}
  },
  /* 
  	* 跟 computed 相似度高達八成
   * computed: {
   * 	fullName: function () {
   *  		return this.firstName + ' ' + this.user.lastName;
   *   }
   * }
   */
})

激似，所以我可以這麼寫囉？

藥都長得很像，但有些亂吃的副作用特別大...

計算屬性(Computed) 另一個好處「其相依 data 一變，computed 也會隨之更新」，反過來講，相依 data 不變就不會重複計算(反正結果也一樣)，computed直接吐回結果。

Method就蠢蠢der，每次重新渲染都會重算一次。當你的相依data包含大且深層陣列，他不會給你滿滿的大平台，只會給你慢慢的大杯具。