Vue 实例/条件渲染

数据与方法

只有当实例被创建时 data中存在的属性才是响应式的。

// 创建一个 Vue 实例
var vm = new Vue({
  data: {a:1}
})
vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。

使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

不要在选项属性或回调上使用箭头函数，比如 

created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())

因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例。

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

v-if与v-show比较

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换（切换元素的 CSS 属性 display）。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if较好。