Vue学习—深入剖析列表渲染

一、深入剖析列表渲染

利用v-for指令，基于数据多次渲染元素。

1.在v-for中使用数组

用法：(item, index) in items
参数：
items: 源数据数组
item：数组元素别名
index：可选，索引
可以访问所有父作用域的属性

<div id="app">
    <li v-for="(person,index) in persons">
        {{ index }}---{{ person.name }}---{{ person.age }}
    </li>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            persons: [
                {name: '大哥',age: 24},
                {name: '二哥',age: 22},
                {name: '三哥',age: 20},
                {name: '老弟',age: 18}
            ]
        }
    });
</script>

可以利用of替代in作为分隔符，因为它更接近迭代器的语法：
<div v-for="item of items"></div>

2.在v-for中使用对象

用法：(value, key, index) in Object
参数：
value: 对象值
key：可选，键名
index：可选，索引

<div id="app">
    <li v-for="(value,key,index) in persons">
        {{ value }}---{{ key }}---{{ index }}
    </li>
</div>

data: {
    persons: {
        name: 'jimo',
        age: 18,
        sex: 'man'
    }
}

3.在v-for中使用数字

用法：n in num
参数：n: 数字，从1开始

<div id="app">
    <li v-for="n in num">
        {{ n }}
    </li>
</div>

data: {
    num: 10
}

4.在v-for中使用字符串

用法：str in string
参数：str: 字符串，源数据字符串中的每一个

<div id="app">
    <li v-for="s in str">
        {{ s }}
    </li>
</div>
data: {
    str: 'Person'
}

5.循环一段包含多个元素的内容

可以利用template元素循环渲染一段包含多个元素的内容

<ul id="app">
    <template v-for="person in persons">
        <li>{{ person.name }}</li>
        <p>{{ person.age }}</p>
    </template>
</ul>
data: {
    persons: [
        {name: '大哥',age: 24},
        {name: '二哥',age: 22},
        {name: '三哥',age: 20},
        {name: '老弟',age: 18}
    ]
}

6.关于key

Vue更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素：

<ul id="app">
    <li v-for="(person,index) in persons">
        {{ person }}
        <input type="text">
        <button @click="handleClick(index)">下移</button>
    </li>
</ul>
data: {
    persons: ['大哥','二哥','三哥','老弟']
},
methods: {
    handleClick (index){
        const deleteItem = this.persons.splice(index,1);
        this.persons.splice(index+1,0,...deleteItem);
    }
}

在"就地复用"策略中，点击按钮，输入框不随文本一起下移，是因为输入框没有与数据绑定，所以vuejs默认使用已经渲染的dom，然而文本是与数据绑定的，所以文本被重新渲染。这种处理方式在vue中是默认的列表渲染策略，因为高效。

这个默认的模式是高效的，但是在更多的时候，我们并不需要这样去处理，所以，为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，我们需要为每项提供一个唯一key特性，Vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

1.key的使用方法

预期值：number | string
有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误，key应唯一。

<ul id="app">
    <li v-for="(person,index) in persons" :key="person">
        {{ person }}
        <input type="text">
        <button @click="handleClick(index)">下移</button>
    </li>
</ul>

不建议将数组的索引作为key值，如：

<li v-for="(person, index) in persons" :key="index">
  {{ person }}
</li>

当改变数组时，页面会重新渲染，Vue会根据key值来判断要不要移动元素。例如当页面重新渲染时，key值为"大哥"的元素为<li>大哥</li>，页面重新渲染前，key值为"大哥"的元素也为<li>大哥</li>，那么Vue就会移动这个li元素，而不是重新生成一个元素。
当使用数组的索引作为key值时，页面重新渲染后，元素的key值会重新被赋值，例如我们将数组进行反转，
反转前：

元素	key值
<li>大哥</li>	0
<li>二哥</li>	1
<li>三哥</li>	2
<li>老弟</li>	3

反转后：

元素	key值
<li>老弟</li>	0
<li>三哥</li>	1
<li>二哥</li>	2
<li>大哥</li>	3

Vue会比对渲染前后拥有同样key的元素，发现有变动，就会删除变化的再生成一个元素，如果用索引作key值得话，那么此时，所有的元素都会被重新生成，对性能影响较大。

那么key如何唯一的？

跟后台协作时，传回来的每一条数据都有一个id值，这个id就是唯一的，用id做key即可。

key不仅为v-for所有，它可以强制替换元素，而不是重复使用它：

<ul id="app">
    <button @click="show = !show">{{ show ? '显示' : '隐藏'}}</button>
    <input type="text" v-if="show" key="a" />//就会随button文本一同改变
    <input type="text" v-else key="b" />
</ul>
data: {
    show: true
}

7.v-for 和 v-if 一同使用

永远不要把 v-if 和 v-for 同时用在同一个元素上。
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以这个模板：

<ul>
  <li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
  </li>
</ul>

将会经过如下运算：

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

因此哪怕我们只渲染出一小部分用户的元素，也得在每次重新渲染的时候遍历整个列表，不论活跃用户是否发生了变化。
所以以下两种场景，我们可以做出如下处理：
1. 为了过滤一个列表中的项目。

<ul id="app">
  <li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'shan', isActive: true, id: 1},
      { name: 'jc', isActive: false, id: 2},
      { name: 'cst', isActive: false, id: 3},
      { name: 'deng', isActive: true, id: 4},
    ]
  }
})

可以把上面的代码更新为：

<!-- 通过原来的数组，得到一个新数组，渲染这个新的数组 -->
<ul>
  <li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'shan', isActive: true, id: 1},
      { name: 'jc', isActive: false, id: 2},
      { name: 'cst', isActive: false, id: 3},
      { name: 'deng', isActive: true, id: 4},
    ],
    activeUsers: []
  }
})
vm.activeUsers = vm.users.filter(user => user.isActive);//将isActive先过滤出来，节省性能

这种方式仅为演示，在日后学习完计算属性后，要利用计算属性来做。

2. 为了避免渲染本应该被隐藏的列表

<ul>
  <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
    {{ user.name }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'shan', isActive: true, id: 1},
      { name: 'jc', isActive: false, id: 2},
      { name: 'cst', isActive: false, id: 3},
      { name: 'deng', isActive: true, id: 4},
    ],
    shouldShowUsers: false
  }
})

html部分可替换成为：

<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  </li>
</ul>

将 v-if 置于外层元素上，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。