介绍
用 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无法检测数组变动的情况如下：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength
var vm = new Vue({data: {items: ['a', 'b', 'c']}})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的
为了解决这类问题，官方提供了两种解决方案。
Vue.set
// Vue.setVue.set(vm.items, indexOfItem, newValue)
Array.prototype.splice
// Array.prototype.splicevm.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源码的这里 /vuejs/vue/blob/dev/src/core/observer/index.js#L201
set方法开始会有一些逻辑判断，对于数组的处理依然使用的是splice方法。
if (Array.isArray(target) && isValidArrayIndex(key)) {target.length = Math.max(target.length, key)target.splice(key, 1, val)return val}
其余的就交给我们vue不支持的IE8ECMAScript5特性Object.defineProperty
Object.defineProperty(obj, key, {value: val,enumerable: !!enumerable,writable: true,configurable: true})
下次我会对Object.defineProperty在做详细介绍，今天就到这了，晚安 。
