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>