vue数组中对象属性变化页面不渲染问题
2019年12月27日更新：
刚刚看到评论里有朋友评论说，“就粘了点官方文档，没有解释?”
首先，解释的话，原因就是Object.observe 已经被废弃了，所以vue不会用一个废弃jsapi来实现对象属性监听。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/observe
然后，记得当时写这篇文章的时候，就是在强调读文档只留下了印象，使用的时候才会有更深的感悟。
现在越来越发现，vue的文档写的真的是很好了，遇到的问题在文档里其实都能找到答案 —— vue响应式原理：https://cn.vuejs.org/v2/guide/reactivity.html。
还有就是最近组织组内伙伴进行技术学习分享的一些感悟：
别人的博客文章终归是二手知识，使用二手知识的时候，要去文档验证一下真伪，文档可以当做是一手知识。
吃透文档后就会可以更进一步，源码才是最接近作者思想的东西，相信读源码一定会更有收获。
-------------------------------------------
原文：
做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。
换了关键词搜索找到了相关方法。
其实之前读文档教程的时候看到过这里，但是只有真的使用之后才会有最直接的感触。
-------------------------------------------
数组更新检测
变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()pop()shift()unshift()splice()sort()reverse()
你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ message: 'Baz' }) 。
替换数组
变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
|
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
|
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
|
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
|
|
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
|
为了解决第二类问题，你可以使用 splice：
|
example1.items.splice(newLength)
|
对象更改检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
|
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
|
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
|
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
|
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
|
Vue.set(vm.userProfile, 'age', 27)
|
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
|
this.$set(this.userProfile, 'age', 27)
|
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：
|
Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
|
你应该这样做：
|
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
|
