你不可不知的Vue.js列表渲染详解

　　


　　

　　

用v代表把一个数组对应为页面上的一组元素
　　

　　

vue。js使用的是v代表指令来处理组件元素的循环迭代逻辑。通常它会和v配合使用,达到我们所需要的处理逻辑。
　　v代表的语法形式是项项目,其项目中就是我们要循环的数组,而产品则是被迭代的数组元素的别名。
　　

　　 　　 　　& lt; ul id=笆纠?”比; 　　& lt;李v="项项目”在 　　{{项目。消息}} 　　& lt;/li> 　　& lt;/ul> 　　 　　

我们都知道既然有循环那肯定少不了对索引的处理.v-for指令给我们提供了可选的第二个参数,即当前项的索引。
　　

　　 　　 　　& lt; ul id=笆纠?”比; 　　& lt;李v="(项目、索引)项目”在 　　{{parentMessage}} -{{指数}}{{项目。消息}} 　　& lt;/li> 　　& lt;/ul> 　　 　　

指数就是那个当前索引了。
　　

　　

你也可以使用的替代在作为分隔符。
　　

　　 　　 　　& lt; div)="项目的项目"祝辞& lt;/div> 　　 　　

<强>在v代表里使用对象
　　

　　

是哒,很明显v代表也可以用来遍历一个对象的属性。
　　

　　 　　 　　& lt; ul类id=皏-for-object”=把菔尽北? 　　李& lt; v=岸韵蟆钡募壑当? 　　{{value}} 　　& lt;/li> 　　& lt;/ul> 　　 　　

也可以提供第二个参数为属性名称(也就是键名)
　　

　　 　　 　　& lt; div v="对象(价值、名称)”在 　　{{名称}}:{{value}} 　　& lt;/div> 　　 　　

还可以用第三个参数作为索引
　　

　　 　　 　　& lt; div v="(价值、名称、指数)在对象“比; 　　{{指数}}。{{名称}}:{{value}} 　　& lt;/div> 　　 　　


　　

　　

敲黑板啦哈~
　　

　　

　　

vuejs为了维护循环列表的状态需要提供唯一的关键属性。
　　这个唯一的关键可以为我们提供列表元素状态的更新,避免重复渲染等优化页面的性能。
　　

　　

这个关键很关键,并不推荐使用简单的索引作为关键的值,因为会有造成重复渲染混乱的可能。
　　

　　


　　

　　

咳咳~继续敲黑板
　　

　　

我们在写程序的时候,往往会有数据更新但是页面元素没有跟着对应变化的情况。
　　

　　

数组列表的更新检测vue为我们提供了一套解决方案,但是需要注意它们在使用的方式上是不同的。
　　

　　

<强>变异方法
　　

　　

意思就是以下的数组处理方法可以触发视图上的更新。
　　

　　 　　 　　push () 　　pop () 　　转变() 　　未() 　　接头() 　　sort () 　　反向() 　　 　　

需要注意的是它们处理的都是原始数组。也就是在原来的数组上增加删除或者排序操作。
　　

　　

<强>非变异方法
　　

　　

数组也有一些方法不会改变原始数据,而是返回新的数组。
　　

　　 　　 　　filter () 　　concat () 　　片() 　　 　　

返回新的数组在页面更新渲染的性能大家不必担心,vue已经为我们做好了重用工作。
　　

　　

需要注意,在有些情况vue无法检测数组变动的情况如下:

　　
    　　<李>当你利用索引直接设置一个数组项时,例如:vm。李物品[indexOfItem]=newValue 　　<李>当你修改数组的长度时,例如:vm.items。李长=newLength 　　
　　 　　 　　var vm=new Vue ({ 　　数据:{ 　　项目:[a, b, c的) 　　} 　　}) 　　vm。项目[1]=' x '//不是响应性的 　　vm.items。长度=2//不是响应性的 　　 　　

为了解决这类问题,官方提供了两种解决方案。

　　

1, Vue.set 　　 　　//Vue.set 　　Vue.set (vm。项、indexOfItem newValue) 　　 　　

2, Array.prototype.splice 　　 　　//Array.prototype.splice 　　vm.items。拼接(indexOfItem 1 newValue) 　　 　　

如果我们在处理数据无法更新视图的时候记得试试这个方法。
　　

　　

<强>对象变更检测注意事项
　　

　　

对于对象属性的增加和删除,对于已经创建的实例,Vue不允许动态添加根级别的响应式属性。

你不可不知的Vue.js列表渲染详解