数组更新检测注意事项
由于 JS 的限制，下列情形数组的更新不能被检测到。
- 使用数组下标设置一个数组项时
- 操作数组长度时
var vm = new Vue({
data: {
arr: ['a', 'b', 'c']
}
})
vm.arr[1] = 'x'; // 不是响应式
vm.arr.length = 2; // 不是响应式
对于第一种情况，可以使用 Vue.set() 方法和 vm.set() 方法其实就是 Vue.set() 全局方法的别名）。同时可以使用 splice() 实现。
Vue.set(vm.arr, 1, 'x')
vm.$set(vm.arr, 1, 'x')
vm.arr.splice(1, 1, 'x')
对于第二种情况也可以使用 splice() 方法实现。
vm.arr.splice(2)
官网链接如下：
数组更新方法-注意事项
对象更新检测注意事项
还是由于 JS 限制，Vue 不能检测对象属性的添加和删除。
var vm = new Vue({
data: {
userInfo: {
name: '简宝玉'
}
}
})
// userInfo.name 响应式
vm.userInfo.age = 17
// userInfo.age 非响应式
同样，你可以使用 Vue.set() 和 vm.$set() 解决这个问题。
Vue.set(vm.userInfo, age, 17)
vm.$set(vm.userInfo, age, 17)
当你需要添加多个属性时，正确操作是使用 Object.assign() 或者 lodash 的 extend() 方法。
vm.userInfo = Object.assign({},vm.userInfo,{
age: 17,
sex: '男‘
})
