【VUE】对data数据的深度监听（多层嵌套数据）

最新推荐文章于 2025-04-08 19:30:47 发布

TaotaoPlus

最新推荐文章于 2025-04-08 19:30:47 发布

阅读量3.5k

点赞数 1

分类专栏： Vue

版权

7 篇文章

订阅专栏

博客指出由于 JavaScript 限制，Vue 视图层不能检测利用索引直接设置数组项、修改数组长度这两种变动。给出了利用索引设置项的解决办法，还提到 splice() 方法可修改数组。同时结合项目案例，说明 form 中 categoryMenuUids 变化需添加监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先举个栗子

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 视图层不更新值的变化
vm.items.length = 2 // 视图层不更新值的变化

由于 JavaScript 的限制，Vue视图层不能检测以上变动的数组

例如：vm.items[indexOfItem] = newValue
解决办法：

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

或者

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

你也可以使用 vm.$set实例方法，该方法是全局方法 Vue.set 的一个别名:

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

例如：vm.items.length = newLength

// Array.prototype.splice
vm.items.splice(newLength)

注：splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

data() {
    return {
      form: {
        uid: null,
        roleName: '',
        summary: '',
        categoryMenuUids: [] // 
      }

form.categoryMenuUids值变化后，发现数据并没有更新。

handleEdit: function(row) {
  ...
  this.form.categoryMenuUids = newValue;
}

因为这个是属于form中的 categoryMenuUids 的变化，并不能使vue监听到变化，所以就不能改变。所以需要添加监听，deep = true

watch: {
  'form': {
    handler(newVal, oldVal) {
      console.log('value changed', newVal, oldVal);
    },
    deep: true
  }
}