Vue组件的复用 / key

用key管理可复用的元素

 

例1

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <template v-if="ok==='username'">
    用户名: <input type="text" placeholder="请输入用户名" key="name-input">
  </template>
  <template v-else>
    密码: <input type="text" placeholder="请输入密码" key="psd-input">
  </template>
  <button @click="toggle">点击切换类型</button>
</div>

   new Vue({
     el: "#app",
     data: {
       ok: 'username'
     },
     methods: {
       toggle: function() {
         if (this.ok === 'username') {
           this.ok = 'psd'
         } else {
           this.ok = 'username';
         }
       }
     }
   })

 

例2

<script src="https://unpkg.com/vue"></script>


<div id="app">
  KEY: <input type="text" v-model="id"> VALUE: <input type="text" v-model="name">
  <button @click="add">添加</button>
  <ul>
    <li v-for="item in list" :key="item.id"> 
      <input type="checkbox">
      {{item.id}}---{{item.name}}
    </li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    id: "",
    name: "",
    list: [{
        id: 1,
        name: '李斯'
      },
      {
        id: 2,
        name: '嬴政'
      },
      {
        id: 3,
        name: '赵高'
      },
      {
        id: 4,
        name: '韩非'
      },
      {
        id: 5,
        name: '荀子'
      },
    ]
  },
  methods: {
    add: function() {
      this.list.unshift({
        id: this.id,
        name: this.name
      })
    }
  }
})

 

关于key：

官方解释:

　　如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素

理解：

　　加上key默认采取的就是就地复用策略；

　　在表单或者选框中，加上key，可以使得原先填写的内容或勾选的选项，虽有顺序或切换的变化,但是原先填写的内容或勾选处始终跟着原来对应的项,

 

路由参数变化但是页面没有刷新这是Vue的组件复用的默认处理方式
文档

不想复用的话，就在父组件的router-view上加个key
<router-view :key="$route.fullPath"></router-view>