vue中值得注意的细节（持续更新）

比较适合已上手的同学参考，文中的代码我尽可能的做了省略处理

1 key属性的应用

vue在渲染元素时，出于效率考虑会尽可能的复用已有元素而非进行渲染，举个栗子：

<template v-if="type==='name'">
       <label>用户名：</label>
       <input placeholder="请输入用户名"></input>
</template>
<template v-else>
       <label>邮箱：</label>
       <input placeholder="请输入邮箱"></input>
</template>

<button @click="this.type=this.type==='name'?'mail':'name'"></button>

上述代码的实现效果为文本框的切换，但当你运行起来在切换的过程中，你会发现文本框中的内容并未改变，说明<input>被复用了，可以通过提供key属性来解决这种问腿，如下：

<template v-if="type==='name'">
       <label>用户名：</label>
       <input placeholder="请输入用户名" key="name-input"></input>
</template>
<template v-else>
       <label>邮箱：</label>
       <input placeholder="请输入邮箱"  key="email-input"></input>
</template>

<button @click="this.type=this.type==='name'?'mail':'name'"></button>

在代码开发过程中难免遇到在运用v-for或v-lazy时有些元素（图片）不更新的问题，这个时候只需要加上key属性问题就解决了。

2 v-if和v-show

v-if是真正的条件渲染，它会根据表达式适当的销毁或重建元素及绑定的事件或子组件。若表达式初始值为false,则一开始元素不糊渲染，直到当条件第一次为真时才开始编译。

v-show只是简单的css属性切换，无论条件真与否，都会被编译。

综上，v-if更适合条件不经常改变的场景，因为它开销大，v-show适用于频繁的条件切换。

 3 $event

vue 提供特殊变量$event用于访问原生的DOM事件