这两天学习了Vue.js，感觉v-for循环渲染里面有很多知识点，很重要，今天补充一点注意。

一.导言

vue.js的循环渲染依赖于v-for指令，它可以根据vue实例中的信息循环遍历所需的数据，然后渲染相应的内容。它可以遍历数组类型和对象类型的数据。js中的数组本身实际上是一个对象。在这里遍历数组和对象时，方式相似，但略有不同。

(a)横穿物体

me“{ index }”中的div id='app' ul li v-for='(val，key，index)。{{key}}: {{val}}/li /ul/div.var vm=new Vue({ el: '#app '，data : { me : { name : ' Dale '，age: 22，sex: 'male '，height : 170 } })；这里，v-for接收的参数相对复杂，但可以分为三个部分：

(1)括号和其中的遍历结果信息(val、key、index)

其中val为遍历得到的属性值，key为遍历得到的属性名，index为遍历顺序，其中key/index为可选参数。如果不需要，这个指令实际上可以写成v-for=' val in me '；

(2)遍历中的关键字

中的可以替换为。官方说法是“它是最接近JavaScript迭代器的语法”，但使用上没有区别；

(3)被穿越的物体我

Me是绑定到实例的数据属性的属性。事实上，它有一个执行环境，也就是我们最常接触的vue实例。在模板中，我们仍然可以像在方法和计算属性中一样通过这个来访问它。这里的me实际上相当于这个. me，直接在模板中写这个. me也是可行的。

渲染结果如下：

div id=' app ' ulli 0 . name : dale/Lili 1 . age : 22/Lili 2 . sex :公/Lili 3 . height : 170/Li/ul/div(2)遍历数组

items“{ index }”中的div id='app' ul li v-for='(item，index)'。{{item}}/li /ul/div.var vm=new Vue({ el: '#app '，data: { items: ['apple '，'番茄'，'香蕉'，'西瓜']})；类似于遍历一个对象，最大的区别就是对象的“键”和“索引”是一致的，所以这里只需要取一个索引。上述代码的渲染结果如下：

Div id=' app' ulli0.apple/lili1 .番茄/lili2 .香蕉/lili3 .分水岭/Li/ul/div(3)Traverse“integer”

理论上，整数不是遍历单位，但vue为我们提供了一种减少重复代码的便捷方法。

div id=' app ' ul Li v-for=' n in num ' { n } }/Li/ul/div.var vm=new Vue({ el: '#app '，data : { num 3360 3 } })；渲染结果如下：

div id=' app ' ulli 1/Lili 2/Lili 3/Li/ul/div II。实际应用

(1)对象和数组组件

在实际应用中，我们很少单独使用数组或对象来描述我们的数据。更常见的模式是组合数组和对象：

div id=' app ' ul class=' persons ' Li v-for=' person in persons ' name : { { person . name } }，age: { { person.age } }/Li/ul/分区.var vm=new Vue({ el: '#app '，data : { person s :[{ name : ' Dale '，age: 22 }，{ name: 'Tim '，age: 30 }，{ name: 'Rex '，age : 23 }]})；本质上，它是一个被遍历的数组，但是数组的每个元素都是一个对象，也就是上面的人。我们可以通过[]和访问该对象的属性。例如，这里的姓名/年龄。渲染结果如下：

div id=' app ' ul class=' persons ' liname : Dale，年龄： 22；/li liname: Tim，30岁；/li liname: Rex，23岁；/li /ul/div事实上，一种更常见、更强大的模式是将组件与数组/对象相结合，操作与上面类似。

(2)与垂直中频结合

添加了v-for指令的标签。其实v-if指令也可以同时加入，但值得注意的是v-for的优先级更高。在渲染模板时，相当于对每次遍历的结果做一个条件判断。

div id=' app ' ul class=' persons ' Li v-for=' person in persons ' v-if=' person . age=23 ' name : { { person . name } }，age: { { person.age } }/Li/ul/分区.var vm=new Vue({ el: '#app '，data : { person s :[{ name : ' Dale '，age: 22 }，{ name: 'Tim '，age: 30 }，{ name: 'Rex '，age : 23 }]})；这里，我们首先遍历persons的所有元素，然后检查每次得到的person是否大于等于23。如果是，我们就输出，否则不输出。渲染结果如下：

div id=' app ' ul class=' persons ' liname : Tim，年龄： 30；/li liname: Rex，23岁；/li /ul/div如果希望v-if指令的优先级更高，可以考虑将v-if指令添加到由v-for指令绑定的标签的父级。

三、注意事项

(1)钥匙

像v-for一样，vue在默认情况下重用元素来提高性能，而不绑定键属性。如果不需要它的默认行为，它可以显式绑定唯一键。

(二)数据视图更新

Vue的视图更新依赖于getter/setter。如果直接修改、添加或删除数组元素，将不会触发视图更新。这里vue重写了以下方法：

当通过它们修改数据时，按弹出移位取消移位拼接排序反转将触发视图更新。

new Vue({ data: { arr: [1，2，3]} })；例如，在上面的情况下，如果我们想执行arr的push方法，因为push是由Array.prototype.push的数组类型数据继承的，所以我们一般有两种实现。

(1)修改数组.原型

array . prototype . push=function(){ console . log(1)；}([]).push()；//1这里我们修改了Array.prototype上的push方法，但实际上整个prototype属性是可以重写的，比如Array.prototype=xxx，有明显的好处。这里修改后，所有数组类型都可以直接使用这个重写的方法，实现和使用都非常简单；但是由此带来的副作用特别明显，很容易影响其他代码。在其他使用此代码的地方，除了函数实现，效率也会受到很大影响。本机js代码经过特别优化。如果重写实现，效率肯定会受到影响。最重要的是，如果每个人的代码都在同一个环境中运行，然后试图重写同一个方法，最终的结果是不言而喻的。

(2)添加自己的方法

var arr=[]；arr . push=function(){ console . log(1)；} arr . push()；//1 array . prototype . push . tostring()；//' function push(){[native code]} '这里修改了arr的push方法，但是没有涉及Array.prototype.push，因为在读写对象的属性/方法时，js总是会尝试访问“ownproperty”检测到的内容，也就是“hasOwnProperty”，这里叫做“OwnProperty(方法)”。读取数据时，如果内容没有被读取，js会尝试在__proto__上查找数据；写数据的时候，如果这个自己的属性存在，就会被覆盖；如果它不存在，它将作为自己的属性添加到修改后的对象中，而不是尝试将其添加到__proto__。这个规则也是为了防止“父类”修改“子类”以外的属性和方法。虽然这种实现可以避免上面修改Array.prototype的一系列缺点，但是它的问题更加明显，因为每次创建这样的“数组”都需要重新实现/绑定这样的一系列方法，它带来的开发效率和性能问题也不容小觑。

(3)实施3)vue

var arr=[]；new Vue({ data : { arr : arr } })；arr . push . tostring()；//'函数mutator() {var引数$1=引数；这是vue自己的实现array . prototype . push . tostring()；//“function push(){[native code]}”.这是浏览器的本机实现arr . hasown property(' push ')；//false表示不是自己的财产。上面显示vue既没有修改Array.prototype.push，也没有修改自己的属性。但是当我们通过instanceof运算符检查时，arr是Array的另一个实例，那么它是如何实现的呢？或者vue的推送隐藏在哪里？

var base=[]；var arr=[]；base . push=function(){ console . log(1)；};由…改编_ _ proto _ _=basearr . push()；//1 RR。__原型_ _。push()；//1 RR。_ _ proto _ _ push . ToString()；//' function push(){[native code]} '事实上，vue使用类似的方式创建array的一个实例，即一个Array类型的basic对象base，然后向其添加自己的方法push，最后覆盖要用base扩展的arr对象的__proto__属性。

这里，我们需要重写push和其他方法的数组。我们只需要将它的__proto__指向基数组。在读取新创建数组的base.push时，我们发现它没有这样的自有方法，所以它尝试读取__proto__上的方法，发现__proto__属性(即基数组)上有这样的自有方法，所以它不需要向上搜索，直接使用base。

这样，我们就不必为每个数组重写push方法，也不必修改Array.prototype，这似乎是两全其美的做法。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。