Vue中的列表渲染

本来计划是不中断的持续输出内容，这样有一个好处，就是自己有在思考，专注的去干一件事情，久而久之会养成一种习惯，形成一种正反馈。

sigh，计划赶不上变化，期间过年走亲戚+学车耽搁了这么长时间，现在事情都办完了，接着学习。

言归正传

我们在做列表循环的时候，为了提高性能，会给每一个循环项添加唯一的key值，我们可以发现index的下标是唯一的，但是因为其比较费性能，vue没办法充分复用dom节点，所以不用这个。

不用index下标，那么要用什么呢？一般来说，在后端向前端返回数据的时候，一般会带有一个数据条目的标识符，叫做“id”，因此我们可以用id作为唯一的key值。

我们先把数据写死看一下例子：

注意

当我们尝试去修改数组的内容时，不能通过数组下标的形式去修改，需要使用vue提供的几个数组变异方法操作，这样才能实现数组发生变化页面随之改变的响应式更新效果。

vue中提供了7个可用变异方法，分别是：

•  push //增加新的元素
• pop //删除数组最后1个元素
• shift //删除数组第1个元素
• unshift //在数组的开头添加1个或多个元素
• splice //截取数组
• sort //数组排序
• reverse //数组取反

举个栗子

默认的数据是这样的

当我们使用变异方法splice操作后是这样的，可以明显看到第二行的数据由dell --- 01010102响应式刷新为dell --- 123456

那么除了变异方法，还有别的方法可以实现改变数据响应式更新视图吗？嗯，改变引用可以做到。

什么是改变引用呢？

划红线的地方为List数组引用的地方，那么只需要直接改变这里的内容，即可实现响应式更新视图。

举个栗子

可以发现，数据已经被改变。

对象循环

刷新页面，对象被成功渲染在页面上：

那么当我们尝试去添加对象中的内容时，要怎么去做呢？我们可以这样做：

通过改变vm实例中userInfo中的引用来实现添加一条数据，而且页面随之发生改变。