关于vue无法侦听数组及对象属性的变化的解决方案

Posted 2023-03-27

参考技术A

把一个普通 javascript 对象传给 Vue 实例的 data 选项， Vue 将遍历此对象所有的属性 ，并使用 Object.defineProperty 把这些属性全部转为 getter/setter 。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

受到现代JavaScript浏览器的限制，其实主要是 Object.observe() 方法支持的不好， Vue不能检测到对象的添加或者删除。然而Vue在初始化实例时就对属性执行了setter/getter转化过程，所以属性必须开始就在对象上，这样才能让Vue转化它。

如push、splice、=赋值（array=[1,2,3]）

使用下标修改某个元素（这种比较常见）

1.push到数组的时候深拷贝一下

JSON.parse(JSON.stringify(this.widget))

2.给 this.widget 添加属性的时候使用 $set 添加，将响应属性添加到对象上

this.$set(this.widget, item.attr,\'\');

3.object.assign()+直接=赋值

关于 vue 不能 watch 数组变化 和 对象变化的解决方案

原文地址：关于 vue 不能 watch 数组变化 和 对象变化的解决方案

 

vue 监听数组和对象的变化

vue 监听数组

vue 实际上可以监听数组变化，比如：

data () {
  return {
    watchArr: [],
  };
},
watchArr (newVal) {
  console.log(‘监听：‘ + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr = [1, 2, 3];
  }, 1000);
},

 

再如使用 splice(0, 2, 3) 从数组下标 0 删除两个元素，并在下标 0 插入一个元素 3：

data () {
  return {
    watchArr: [1, 2, 3],
  };
},
watchArr (newVal) {
  console.log(‘监听：‘ + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.splice(0, 2, 3);
  }, 1000);
},

 

push 数组也能够监听到

 

vue 无法监听数组变化的情况

但是，数组在下面两种情况无法监听：

1. 利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue;
2. 修改数组的长度时，例如：arr.length = newLength;

 

举例无法监听数组变化的情况

1. 利用索引直接修改数组值

   data () {
     return {
       watchArr: [{
         name: ‘krry‘,
       }],
     };
   },
   watchArr (newVal) {
     console.log(‘监听：‘ + newVal);
   },
   created () {
     setTimeout(() => {
       this.watchArr[0].name = ‘xiaoyue‘;
     }, 1000);
   },

    

2. 修改数组的长度
   长度大于原数组就将后续元素设置为 undefined
   长度小于原数组就将多余元素截掉

   data () {
     return {
       watchArr: [{
         name: ‘krry‘,
       }],
     };
   },
   watchArr (newVal) {
     console.log(‘监听：‘ + newVal);
   },
   created () {
     setTimeout(() => {
       this.watchArr.length = 5;
     }, 1000);
   },

    

　　　　上面的 watchArr 变成
　　　　

vue 无法监听数组变化的解决方案

1. this.$set(arr, index, newVal);

   data () {
     return {
       watchArr: [{
         name: ‘krry‘,
       }],
     };
   },
   watchArr (newVal) {
     console.log(‘监听：‘ + newVal);
   },
   created () {
     setTimeout(() => {
       this.$set(this.watchArr, 0, {name: ‘xiaoyue‘});
     }, 1000);
   },

    

2. 使用数组 splice 方法可以监听，例子上面有

3. 使用临时变量直接赋值的方式，原理与直接赋值数组一样

   data () {
     return {
       watchArr: [{
         name: ‘krry‘,
       }],
     };
   },
   watchArr (newVal) {
     console.log(‘监听：‘ + newVal);
   },
   created () {
     setTimeout(() => {
       let temp = [...this.watchArr];
       temp[0] = {
         name: ‘xiaoyue‘,
       };
       this.watchArr = temp;
     }, 1000);
   },

    

vue 监听对象

vue 可以监听直接赋值的对象

this.watchObj = {name: ‘popo‘};

 

vue 不能监听对象属性的添加、修改、删除

vue 监听对象的解决方法

1. 使用 this.$set(object, key, value)
2. 使用深度监听 deep: true，只能监听原有属性的变化，不能监听增加的属性

   mounted () {
     // 这里使用深度监听 blog 对象的属性变化，会触发 getCatalog 方法
     this.$watch(‘blog‘, this.getCatalog, {
       deep: true,
     });
   },

    

3. 使用 this.set(obj, key, val) 来新增属性（vue 无法监听 this.set 修改原有属性）

   this.$set(this.watchObj, ‘age‘, 124);

delete this.watchObj[‘name’]（vue 无法监听 delete 关键字来删除对象属性）

4. 使用 Object.assign 方法，直接赋值的原理监听（最推荐的方法）

   this.watchObj = Object.assign({}, this.watchObj, {
     name: ‘xiaoyue‘,
     age: 15,
   });

    

原文地址：

关于 vue 不能 watch 数组变化 和 对象变化的解决方案