10. 列表渲染

用v-for把一个数组对应为一组元素

<ul id="example-1">
  <li v-for="(item,index) in items">
    {{ item.message }}
  </li>
</ul>

用v-for遍历一个对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

可以提供第二个参数，name来获取键值对的健名，提供第三个参数，代表索引。

<div v-for="(value, name,index) in object">
  {{ name }}: {{ value }}
</div>

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

维护状态

如果遍历的时候没有添加key名称，那么这时候循环会采用【就地更新策略】，更新每个元素，尽管这种更新是高效的，但是
只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

数组更新检测

变异方法

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

vue对这些方法进行了包装，数据在调用后会触发视图更新。

替换数组

使用map，filter之类的替换整个数组，性能开销并不会太大，vue并不是丢弃原有数组，而是经过一些复杂的操作使得替换变的搞小

注意事项

以下行为不会触发更新：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

遇到这种情况，可以使用Vue.set去强行触发响应式——
Vue.set(vm.items, indexOfItem, newValue)
例如：

 Vue.set(vue, "message", "获取事件")
 Vue.set(vue.newsObj, "name", "获取事件")

过滤予排序

可以通过循环遍历一个计算属性来直接输出一个想要的结果，而不是通过if来条件渲染每个条目：

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不适用的情况下，你也可以使用一个方法

<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

方法会将对象进行一波计算，再将计算后的结果进行循环。

另外直接对int值使用for便会直接循环对应次数：

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

在模板上使用v-for

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

在组件上使用v-for

<my-component v-for="item in items" :key="item.id"></my-component>

注意：2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的

最后编辑于：2019.05.31 15:07:19