23 列表渲染与“就地复用”原则

目录

遍历数组
遍历对象
使用值范围
组件的“就地复用”原则
源码

<!-- 一般遍历数组 -->
<li v-for="item in items">{{ item.message }}</li>
<!-- 使用数组中的索引 -->
<li v-for="(item,index) in items">{{index}} {{ item.message }}</li>

<!-- 使用 of -->
<li v-for="(item,index) of items">{{index}} {{ item.message }}</li>

<!-- 遍历对象 -->
<li v-for="(value,name,index) of object">{{ index }}. {{ name }}: {{ value }}</li>

<!-- 使用值范围 -->
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

这种方式只适用于列表渲染不依赖子组件状态，或临时 DOM 状态变化。

<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>
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;
    }
  }

<div v-for="(p, i) in persons">
  {{p.name}}
  <input :value="p.name" type="text" />
  <button @click="down(i)" v-if="i != persons.length - 1">下移</button>
</div>