vue中会遇到这种问题，使用列表渲染v-for渲染出来的内容，想更新的时候，页面上却没有更新，
比如现在有一个list
var list = [{a:1},{a:2},{a:3},..]
<p v-for="item in list" :key="item.a">{{item.a}}</p>
那么渲染结果应该是这样：
示例
嗯，就是这样。
但在此时，如果要更新某一条记录的值，可能会执行这条语句：
list[0].a = 5555
此时问题出现了：
页面没有更新，vue不是数据双向绑定吗？
没错，vue是数据双向绑定，但是仔细观察可以得到，更新的不是一个变量，而是数组里面的对象的属性，此时涉及vue中的变异检测机制。
vue官网如此介绍：
也就是是说上面这种操作虽然改变了数据，但是vue检测不到，所以没有更新页面。
那么问题来了，怎么能实现更新呢？有以下两种方式：
1.this.$set(list[0],'a',value)
2.list.splice(0,1,{a:value})
个人比较喜欢第二种方式，虽然是删除了数组元素又添加了数组元素，但是vue会最大程度利用dom，不会先移除dom再添加一个新的dom。
网友评论