vue基础

一、 计算属性与方法比较

计算属性：

Computed reversed message: "{{ reversedMessage }}"
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

方法：

Reversed message: "{{ reversedMessage() }}"
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

二、条件渲染

用 key 管理可复用的元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，如果想要每次切换时，输入框都将被重新渲染。只需添加一个具有唯一值的 key 属性即可：

注意， 元素仍然会被高效地复用，因为它们没有添加 key 属性。

注意，v-show 不支持