vue的重用机制和属性key

造成的现象：在input输入框切换时，input输入框中的内容还在。

原理：在v-if切换标签时, 如果将要销毁和将要创建的标签是相同标签, 那么vue就不会执行销毁和新建, 而是把原有的标签修改内容和属性后直接拿来重用, 但是input标签的value值不会重置, 造成了切换时input中的数据被保留下来

解决方案：给不同的input设置不同的key值，默认不添加时为undefined

属性key 的作用

标签上的属性key相当于给标签添加了一个标记,用于视图更新时更好的解析视图, 视图更新渲染时通过key来正确区分不同的标签结构, 提高视图渲染更新的效率 (重用机制的目的就是为了提高渲染效率)，

什么时候设置key不同，什么时候设置key相同（不设置？

在v-for循环时，建议加key，保证循环的每一个标签都是不同的，避免重用机制造成的渲染异常。

在不牵扯循环和切换时，一般不用加key