v-for

用于循环的数组里面的值可以是对象，也可以是普通元素 <ul id="example-1"> <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> <li v-for="item in items"> {{ item.message }} </li> </ul> <script> new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ]， } }) </script>

当 v-if 与 v-for 一起使用时

v-for 具有比 v-if 更高的优先级。若for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for

渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染

这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

<!-- 循环结构-遍历对象 v 代表 对象的value k 代表对象的 键 i 代表索引 ---> <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> <script> new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ]， obj: { uname: 'zhangsan', age: 13, gender: 'female' } } }) </script>

key 起到的作用

key来给每个节点做一个唯一标识key的作用主要是为了高效的更新虚拟DOM解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值

key背后的原理

要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。

vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。

同一层级的一组节点，他们可以通过唯一的id进行区分。

因此，当页面的数据发生变化时，Diff算法只会比较同一层级的节点： 1. 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。 2. 如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。————问题就此产生了

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时 ，如果在中间插入元素，则在此位置之后的所有节点的属性全都要更新，效率太低。 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。所以我们需要使用key来给每个节点做一个唯一标识，确保它在特定索引下显示已被渲染过的每个元素，这样的话Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。