箭頭函式、計算屬性VS方法、計算屬性的 setter、用 key 管理可複用的元素

因為 Vue 不是基於字串的模板引擎。反之，對於使用者介面 (UI)，元件更適合作為可重用和可組合的基本單位。

計算屬性快取 vs 方法

你可能已經注意到我們可以通過在表示式中呼叫方法來達到同樣的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在元件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
 

我們可以將同一函式定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的依賴進行快取的。只在相關依賴發生改變時它們才會重新求值。這就意味著只要message 還沒有發生改變，多次訪問 reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函式。

計算屬性的 setter

計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：

computed: {
  fullName: {
    // getter
    get: function () {
      
 
return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

現在再執行 vm.fullName = 'John Doe' 時，setter 會被呼叫，vm.firstName 和 vm.lastName

用 key 管理可複用的元素

Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的登入方式之間切換：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

那麼在上面的程式碼中切換 loginType 將不會清除使用者已經輸入的內容。因為兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。

自己動手試一試，在輸入框中輸入一些文字，然後按下切換按鈕：

這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要複用它們”。只需新增一個具有唯一值的key屬性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

現在，每次切換時，輸入框都將被重新渲染。請看：

注意，<label> 元素仍然會被高效地複用，因為它們沒有新增 key 屬性。