Vue-列表渲染

1.Vue怎么渲染一个列表？

1. 基于数组使用v-for 指令
   v-for 指令需要使用 item in items 语法，不过我们更推荐使用of代替in，因为这样更接近js迭代器的语法。其中 items 是我们要渲染的数组，而 item 则是渲染数组里边的元素的别名。

<div id="root">
  <div v-for="item of list">
    {{ item.message }}
  </div>
</div>

var vm= new Vue({
  el: '#root',
  data: {
    list: [
      { message: 'hello' },
      { message: 'world' }
    ]
  }
})
<!-- 结果是：hello world  -->

<!-- v-for 还支持一个可选的第二个参数，即当前项的索引index。-->
<div id="root">
  <div v-for="(item, index) of list">
    {{ index }} - {{ item.message }}
  </div>
</div>

var vm= new Vue({
  el: '#root',
  data: {
    list: [
      { message: 'hello' },
      { message: 'world' }
    ]
  }
})
<!-- 结果是：0-hello 1-world  -->

一般不推荐使用index当循环数组的key值（防止元素被复用而使用的一个唯一存在的值），性能上会损耗，而使用后端返回的id则是一个常用的方式。

2. 基于数组使用v-for 指令
   可以用 v-for 来遍历一个对象

<div id="root">
  <div v-for="item of object">
    {{ item}}
  </div>
</div>

new Vue({
  el: 'root',
  data: {
    object: {
      name: 'Zhangsan',
      age: 18,
    }
  }
})
<!-- 结果：Zhangsan 18-->

<!--你也可以提供第二个的参数 —— 键名：-->
<div v-for="(item, name) of object">
  {{ name }}: {{ item}}
</div>
<!-- 结果：name：Zhangsan age：18-->


<!-- 还可以用第三个参数——index作为索引：-->
<div v-for="(item, name, index) of object">
  {{ index }}. {{ name }}: {{ item}}
</div>
<!-- 结果：0.name：Zhangsan 1.age：18 -->

2.维护状态：key

• 在渲染简单的无状态组件时，如果不添加key组件，默认都是就地复用，不会删除添加节点，只是改变列表项中的文本值。
• key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。
• 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key值：

<div v-for="item of list" :key="item.id">
  <!-- 内容 -->
</div>

3.数组更新

在vue里边，如果通过数组下标进行数据的修改，页面是不会响应变化的。

• 我们可以通过改变引用（数组在js里是一个引用类型，如果能改变数组/对象的引用，那页面也会跟着变，只需要操作list，让它指向另外一个数据空间即可）
  

• 或者通过7个数组的变异方法来处理这个问题（也就是“变更方法”）

  1. pop（）删除数组的最后一项
  2. push（）新增一项
  3. shift（）删除数组的第一项
  4. unshift（）往数组第一项增加一点内容
  5. splice（）数组的截取
  6. sort（）数组的排序
  7. reverse（）数组的取反

• “非变更方法”——替换数组：
  Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
  例如 filter()、concat() 和 slice()，它们不会变更原始数组，而总是返回一个新数组。

• Vue提供的set方法也可以响应式地改变页面内容：
  Vue.set()或者vm.$set()
  
  

4.显示过滤/排序后的结果

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性computed，来返回过滤/排序后的数组。

<div v-for="item of list">{{item}}</div>

data: {
  list: [ 1, 2, 3, 4, 5 ]
},
computed: {
  list() {
    return this.list.filter((number) {
      return number % 2 === 0
    })
  }
}

<!-- 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：-->
<div v-for="item of list">
  <div v-for="item of even(n)">{{item}}</div>
</div>

data: {
  list: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even(numbers) {
    return numbers.filter((number) {
      return number % 2 === 0
    })
  }
}

5.在 v-for 里使用值范围

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

<div>
  <span v-for="n in 5">{{ n }} </span>
</div>
<!-- 结果：1 2 3 4 5-->

6.在 template标签上使用 v-for

类似于 v-if，你也可以利用带有 v-for 的 来循环渲染一段包含多个元素的内容。比如：

  <template v-for="item in items">
    <div>{{ item.msg }}</div>
  </template>

7.在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for，同时需绑定key值：

<component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></component>

因为组件有自己独立的作用域，所以任何数据都不会被自动传递到组件里。使用 prop可以把迭代数据传递到组件里，以便组件在其他场合重复使用。