Vue组件的复用 / key

Posted 2022-11-04 bubu-sourire

用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>