vue v-if 加key值的作用

 <div id="app">
    <template v-if="type === 'name'">
      <label>用户名：</label>
      <input type="text" placeholder="请输入用户名...">
    </template>
    <template v-else>
      <label>邮箱：</label>
      <input type="text" placeholder="请输入邮箱...">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
  </div>
  <script src="vue.js"></script>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      type: 'name'
    },
    methods: {
      handleToggleClick() {
        this.type = this.type === 'name' ? 'mail' : 'name';
      }
    }
  });

vue在渲染元素时，处于效率考虑， 会尽量地复用已有的元素而非重新渲染，比如上面的实例，在，点击切换按钮，虽然DOM变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明input元素被复用了，如果不希望这样做，可以使用vue.js提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的！！！，例如下面这样：

<div id="app">
    <template v-if="type === 'name'">
      <label>用户名：</label>
      <input type="text" placeholder="请输入用户名..." key="neme-input">
    </template>
    <template v-else>
      <label>邮箱：</label>
      <input type="text" placeholder="请输入邮箱..." key="mail-input">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
  </div>
  <script src="vue.js"></script>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      type: 'name'
    },
    methods: {
      handleToggleClick() {
        this.type = this.type === 'name' ? 'mail' : 'name';
      }
    }
  });

给input元素添加key，就不会复用了，切换类型时键入的内容也会被删除，不过label元素仍然是被复用的，因为没有添加key属性！