Vue列表渲染 Vue列表渲染

列表循环 v-for 将一个数组对应为一组元素
v-for指令根据数组选项列表进行渲染，使用时需使用item in items形式的特殊语法。items是源数据数组且item是数组元素迭代的别名。

Document - 锐客网

【Vue列表渲染】v-for块中，拥有对父作用域属性的完全访问权限。v-for支持一个可选第二个参数为当前项的索引。

Document - 锐客网

可使用of替换in作为分隔符，因为它最接近JS迭代器的语法

一个对象的 v-for
可使用v-for通过一个对象的属性来迭代

Document - 锐客网

v-for提供第二个参数为键名

{{key}} {{val}}

v-for提供第三个参数为索引

{{idx}} {{key}} {{val}}

在遍历对象时，是按Object.keys()的结果遍历，不能保证其结果在不同的JS引擎下是一致的。
key 当Vue.js用v-for正在更新已渲染过的元素列表时，默认使用"就地复用"策略。若数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，且确保它在特定索引下显示已被渲染过的每个元素。这个默认的模式是高效的，但只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。
为了给Vue一个提示，以便能跟踪每个节点的身份，从而重用和重排现有元素,需为每项提供一个唯一的key属性。理想的key值是每项都有且仅有唯一的id。这个特殊的属性的工作方式类似于一个属性，需使用v-bind来绑定动态值。

建议尽可能在使用v-for时提供key，除非遍历输出的DOM内容非常简单，或是刻意依赖默认行为以获取性能上的提升。
因为它是Vue识别节点的一个通用机制，key并不与v-for特别关联，key具有其他用途。
数组更新检测变异方法
Vue包含一组观察数组的变异方法，它们会触发视图更新。

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

app.items = app.items.push({message:'foo'});

替换数组

变异方法(mutation method)顾名思义，会改变方法调用的原始数组。
非变异方法(non-mutating method)不会改变原始数组，总是返回一个新数组。

当使用非变异方法时，可用新数组替换旧数组。

filter()
concat()
slice()

app.items = app.items.filter(function(item){ return item.message.match(/foo/); });

非变异方法并不会导致Vue丢弃现有DOM并重新渲染整个列表，Vue为了使得DOM元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替代原来的数组是非常高效的。
注意事项
由于JS自身限制Vue不能检测以下变动的数组：

当利用索引直接设置一个项时 vm.items[index]=newVal
当修改数组的长度时 vm.items.length=newLen
为解决第一类问题，以下两种方式都可以实现和vm.items[index]=newVal相同的效果，同样也触发状态更新。

// Vue.set Vue.set(app.items, index, newVal)// Array.prototype.splice app.items.splice(index, 1, newVal);

为了解决第二类问题可使用splice

app.items.splice(newLen)

对象更改检测注意事项由于JS限制Vue无法检测对象属性的添加或删除

var vm = new Vue({ data:{ message:'hello' } }); //vm.message是响应式的 vm.username = 'alice'; //非响应式

对于已经创建的实例，Vue无法动态添加根级别的响应式属性。但可使用Vue.set(obj,key,val)方式向嵌套对象添加响应式属性。

var vm= new Vue({ data:{ profile:{ name:'alice' } } }); //添加新属性到嵌套的profile对象 Vue.set(vm.profile, 'age', 20); //使用vm.$set实例方法，它只是全局Vue.set的别名。 vm.$set(this.profile, 'age', 20);

有时可能需为已有对象赋予多个新属性，如使用Object.assign()或_.extend()。在这种情况下，用两个对象的属性创建一个新对象。若想添加新的响应式属性：