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'
})
Logo

前往低代码交流专区

更多推荐