Vue 数组和对象更新后页面 DOM 不更新问题的解决方法。

Vue 数组和对象更新后页面 DOM 不更新问题的解决方法。

* Vue 监听不到深层次的对象属性或者数组值的改变。*

数组更改检测注意事项

由于JavaScript的限制，Vue不能检测以下变动的数组：

1. 当使用索引直接改变或者设置一个项时，例如：vm.items[index] = newvalue

2. 当修改数组的长度时，例如：vm.items.lenght = newValue

   let vm = new Vue({
       data:{
           items: ['a','b','c']
       }
   }) 
    vm.items[1] = 'x' // 不是响应式的
    vm.items.lenght = 2 //不是响应式的
   

为了解决第一类问题，以下两种方法都可以实现相同的效果。同时也将触发 DOM 状态更新。

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

由于get 方法是全局的 Vue.set 的一个比别名：也可以使用下面的方式：

vm.$set(vm.items, indexOfItem, newValue)

关于第二类问题的解决方式，可以使用 splice:

vm.items.splice(newLength)

对象更改改变事项

还是由于 Javascript 的限制。Vue 不能监测对象属性的添加或者删除。

let vm = new Vue{(
data:{
a:1
}
// vm.b 不是响应式的

对于已经建立的实例，vue 不能动态的添加跟级别响应式属性。但是可以使用 Vue.set(object,key,value) 方法向嵌套对象添加响应式属性，例如：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

可以添加一个新的 get属性嵌套的 userProfile对象：

Vue.set(vm.userProfile, 'age', 27)

有时可能需要为已有对象赋予多个新的属性，比如使用 Obiect.assign() 或 _.extend()，在这种情况下，也应该使用连个对象的属性创建一个新的对象。

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})