html中如何循环数组渲染dom,列表渲染 之 v-for遍历数组和对象(利用key属性实现高效更新)...

(1) 遍历数组和对象

Document

列表

• {{list[0]}}
• {{list[1]}}
• {{list[2]}}
• {{list[3]}}

遍历数组

• {{item}}

• {{index}}-{{item}}

遍历对象

• {{item}}

• {{key}}：{{item}}

• {{index}}：{{key}}：{{item}}

var vm = new Vue({

el:"#app",

data:{

list:["火龙果","龙眼","猕猴桃","樱桃"],

user:{

name:"liy",

phone:"123456"

}

}

});

(2) key属性的作用

说明：在列表中间节点插入新的数据节点时，即若希望在B和C之间加入一个F，Diff算法(Vue的虚拟DOM的different算法)会将之前的C更新为F、D更新为C、E更新为D、然后再更新E，效率很低。

中间插入.png

key的作用：使用key来给每一个节点添加一个唯一标识，此时Diff算法就可以正确地识别此节点 并 找到正确的位置插入新的节点，从而高效地更新虚拟DOM，提升性能。

注意：我们在使用v-for时，建议为对应的元素或组件添加一个key属性；但是key需要具有唯一性，可使用item作为key，使用index作为key值其实无意义(并不能提升更新效率)。

Document

• {{item}}

var vm = new Vue({

el:"#app",

data:{

list:["火龙果","龙眼","猕猴桃","樱桃"]

}

});