VUE 小點 1

箭頭函數、計算屬性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 屬性。