iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
0
Modern Web

Vue.js 30天系列 第 10

Vue.js 10 - 計算屬性(Computed)

計算屬性 具有什麼特性?

當我們定義一個 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包含大且深層陣列,他不會給你滿滿的大平台,只會給你慢慢的大杯具。


上一篇
Vue.js 09 - Watch
下一篇
Vue.js 11 - DOM事件處理
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言