不可不知的 Vue.js 列表渲染

介绍

用 v-for 把一个数组对应为页面上的一组元素

vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑。一般它会和 v-if 配合使用，达到咱们所须要的处理逻辑。

v-for 的语法形式是 item in items，其中 items 就是咱们要循环的数组，而 item 则是被迭代的数组元素的别名。

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

咱们都知道既然有循环那确定少不了对索引的处理。v-for 指令给咱们提供了可选的第二个参数，即当前项的索引。

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

index 就是那个当前索引了。

你也可使用 of 替代 in 做为分隔符。

<div v-for="item of items"></div>

在 v-for 里使用对象

是哒，很明显 v-for 也能够用来遍历一个对象的属性。

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

也能够提供第二个参数为 property 名称 (也就是键名)

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

还能够用第三个参数做为索引

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

维护状态

敲黑板啦哈~

vuejs 为了维护循环列表的状态须要提供惟一的 key 属性。

这个惟一的 key 能够为咱们提供列表元素状态的更新，避免重复渲染等优化页面的性能。

这个 key 很关键，并不推荐使用简单的索引做为 key 的值，由于会有形成重复渲染混乱的可能。

数组更新检测

咳咳～ 继续敲黑板

咱们在写程序的时候，每每会有数据更新可是页面元素没有跟着对应变化的状况。

数组列表的更新检测 vue 为咱们提供了一套解决方案，可是须要注意它们在使用的方式上是不一样的。

变异方法

意思就是如下的数组处理方法能够触发视图上的更新。

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

须要注意的是它们处理的都是原始数组。也就是在原来的数组上增长删除或者排序操做。

非变异方法

数组也有一些方法不会改变原始数据，而是返回新的数组。

filter()
concat()
slice()

返回新的数组在页面更新渲染的性能你们没必要担忧，vue 已经为咱们作好了重用工做。

须要注意，在有些状况 vue 没法检测数组变更的状况以下：

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决这类问题，官方提供了两种解决方案。

1. Vue.set

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

1. Array.prototype.splice

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

若是咱们在处理数据没法更新视图的时候记得试试这个方法。

对象变动检测注意事项

对于对象属性的增长和删除，对于已经建立的实例，Vue 不容许动态添加根级别的响应式属性。

对于这个问题可使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

v-for 还能够处理整数的循环

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

最后提醒使用 v-for 时必定要记得带上 key 哟！

神秘的 set

综上咱们会知道 js 没法处理组件即时更新的都由 vue 提供的这个 set 方法接管。那么这个 set 有什么过人之处，能够完成组件与数据的绑定呢？

关键位置能够看 vue 源码的这里 https://github.com/vuejs/vue/...

set 方法开始会有一些逻辑判断，对于数组的处理依然使用的是 splice 方法。

if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
}

其他的就交给咱们 vue 不支持的 IE8 ECMAScript5 特性 Object.defineProperty

Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
})

下次我会对 Object.defineProperty 在作详细介绍，今天就到这了，晚安😴。

欢迎关注微信公众号：花橙橙

以为不错记得点赞哦~