就地复用是什么

卷 vue

vue

发布日期: 2021-08-27

文章字数: 433

阅读时长: 2 分

官方的解释 :

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

这也好理解，毕竟只是数据data变了，dom肯定不会发生改变，而且也没有办法去区分dom属于哪项数据。

如果设置key就不一样了。key是一个唯一的标识符，可以让diff算法对数据项的dom进行区分，这时就会移动dom元素。

需要注意的是如果设置key为index那么实际上效果和默认情况是一样的，因为index会让vue认为数据项没有发生位置改变。

点击查看代码演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  <div id="app">
    <h3>采用就地复用策略(vuejs默认情况)</h3>
    <div  v-for='(p, i) in persons'>
      {{p.name}}  
      <input type="text"/>  
      <button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
    </div>

    <h3>不采用就地复用策略(设置key)</h3>
    <div  v-for='(p, i) in persons' :key='p.id'>
      {{p.name}}  
      <input type="text"/>  
      <button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
    </div>

  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        persons: [
          { id: 1, name: 'AJ' },
          { id: 2, name: 'Dandan' },
          { id: 3, name: 'Yoko' }
        ]
      },
      methods: {
        down: function(i) {
          if (i == this.persons.length - 1) return;
          
          //拷贝一个
          var listClone = this.persons.slice();
          
          //前后交换
          var one = listClone[i];
          listClone[i] = listClone[i + 1];
          listClone[i + 1] = one;

          //重新赋值响应式数据
          this.persons = listClone;
        }
      }
    });
  </script>
</body>
</html>