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 属性。