Vue不能watch数组和对象变化解决方案

目录

Vue 能监听数组的情况Vue 无法监听数组变化

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

Vue 无法监听数组变化的解决方案Vue 监听对象

Vue 设置监听对象

Vue 能监听数组的情况

Vue 监听数组和对象的变化（vue2.x）
vue 实际上可以监听数组变化，比如：
直接 = 赋值

1. data () {
2.   return {
3.     watchArr: [],
4.   };
5. },
6. watch: {
7.   watchArr (newVal) {
8.     console.log('监听：' + newVal);
9.   }
10. },
11. created () {
12.   setTimeout(() => {
13.     this.watchArr = [1, 2, 3];
14.   }, 1000);
15. },

复制代码

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

1. data () {
2.   return {
3.     watchArr: [1, 2, 3],
4.   };
5. },
6. watch: {
7.   watchArr (newVal) {
8.     console.log('监听：' + newVal);
9.   }
10. },
11. created () {
12.   setTimeout(() => {
13.     this.watchArr.splice(0, 2, 3);
14.   }, 1000);
15. },

复制代码

push、unshift、pop 数组也能够监听到

Vue 无法监听数组变化

但是，数组在下面两种情况无法监听：
利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue;
修改数组的长度时，例如：arr.length = newLength;

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

利用索引直接修改数组值

1. data () {
2.   return {
3.     watchArr: [{
4.       name: 'krry',
5.     }],
6.   };
7. },
8. watch: {
9.   watchArr (newVal) {
10.     console.log('监听：' + newVal);
11.   }
12. },
13. created () {
14.   setTimeout(() => {
15.     this.watchArr[0].name = 'xiaoyue';
16.   }, 1000);
17. },

复制代码

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

1. data () {
2.   return {
3.     watchArr: [{
4.       name: 'krry',
5.     }],
6.   };
7. },
8. watch: {
9.   watchArr (newVal) {
10.     console.log('监听：' + newVal);
11.   }
12. },
13. created () {
14.   setTimeout(() => {
15.     this.watchArr.length = 5;
16.   }, 1000);
17. },

复制代码

上面的 watchArr 变成

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

1. this.$set(arr, index, newVal);
2. data () {
3.   return {
4.     watchArr: [{
5.       name: 'krry',
6.     }],
7.   };
8. },
9. watch: {
10.   watchArr (newVal) {
11.     console.log('监听：' + newVal);
12.   }
13. },
14. created () {
15.   setTimeout(() => {
16.     this.$set(this.watchArr, 0, {name: 'xiaoyue'});
17.   }, 1000);
18. },

复制代码

使用数组 splice 方法可以监听，例子上面有
使用临时变量直接赋值的方式，原理与直接赋值数组一样

1. data () {
2.   return {
3.     watchArr: [{
4.       name: 'krry',
5.     }],
6.   };
7. },
8. watch: {
9.   watchArr (newVal) {
10.     console.log('监听：' + newVal);
11.   }
12. },
13. created () {
14.   setTimeout(() => {
15.     let temp = [...this.watchArr];
16.     temp[0] = {
17.       name: 'xiaoyue',
18.     };
19.     this.watchArr = temp;
20.   }, 1000);
21. },

复制代码

Vue 监听对象

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

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

但是 Vue 不能 直接 监听对象属性的添加、修改、删除

Vue 设置监听对象

使用this.$set(object, key, value)、this.$delete(object, key)
使用深度监听 deep: true，只能监听原有属性的变化，不能监听新增、删除的属性

1. mounted () {
2.   // 这里使用深度监听 blog 对象的属性变化，会触发 getCatalog 方法
3.   this.$watch('blog', this.getCatalog, {
4.     deep: true
5.     // immediate: true // 是否第一次触发
6.   });
7. },
9. watch: {
10.   obj: {
11.     // 这里深度监听变化，直接触发下面方法
12.     handler(curVal, oldVal) {
13.       // TODO
14.     },
15.     deep: true,
16.     immediate: true // 是否第一次触发
17.   }
18. }

复制代码

使用this.$set(obj, key, val)来新增属性，this.$delete(object, key)来删除属性
无法使用 this.$set 监听修改原有属性；可以使用深度监听 deep: true，可以直接以 obj.key 的方法来设置原有属性

1. this.$set(this.watchObj, 'age', 124);
2. this.$delete(this.watchObj, 'age')
4. delete this.watchObj[‘name']//（Vue 无法监听 delete 关键字来删除对象属性）

复制代码

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

1. this.watchObj = Object.assign({}, this.watchObj, {
2.   name: 'xiaoyue',
3.   age: 15,
4. });

复制代码

直接 watch obj.key 监听某个值的变化

1. watch: {
2.   'obj.name'(curVal, oldVal) {
3.     // TODO
4.   }
5. }

复制代码

以上就是Vue不能watch数组和对象变化解决方案的详细内容，更多关于Vue watch数组对象变化的资料请关注中国红客联盟其它相关文章！