前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于 vue 不能 watch 数组变化 和 对象变化的解决方案

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

作者头像
Krry
修改2019-03-01 17:40:48
6.7K0
修改2019-03-01 17:40:48
举报
文章被收录于专栏:Krryblog

博客地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案

vue 监听数组和对象的变化

vue 监听数组

vue 实际上可以监听数组变化,比如:

代码语言:txt
复制
data () {
  return {
    watchArr: [],
  };
},
watchArr (newVal) {
  console.log('监听:' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr = [1, 2, 3];
  }, 1000);
},

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

代码语言:txt
复制
data () {
  return {
    watchArr: [1, 2, 3],
  };
},
watchArr (newVal) {
  console.log('监听:' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr.splice(0, 2, 3);
  }, 1000);
},

push 数组也能够监听到

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

但是,数组在下面两种情况无法监听:

  1. 利用索引直接设置一个数组项时,例如:arrindexOfItem = newValue;
  2. 修改数组的长度时,例如:arr.length = newLength;

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

  1. 利用索引直接修改数组值
代码语言:txt
复制
data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watchArr (newVal) {
  console.log('监听:' + newVal);
},
created () {
  setTimeout(() => {
    this.watchArr[0].name = 'xiaoyue';
  }, 1000);
},
  1. 修改数组的长度 长度大于原数组就将后续元素设置为 undefined 长度小于原数组就将多余元素截掉undefined
代码语言:txt
复制
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);
代码语言:txt
复制
data () {
  return {
    watchArr: [{
      name: 'krry',
    }],
  };
},
watchArr (newVal) {
  console.log('监听:' + newVal);
},
created () {
  setTimeout(() => {
    this.$set(this.watchArr, 0, {name: 'xiaoyue'});
  }, 1000);
},
  1. 使用数组 splice 方法可以监听,例子上面有
  2. 使用临时变量直接赋值的方式,原理与直接赋值数组一样
代码语言:txt
复制
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 可以监听直接赋值的对象

代码语言:txt
复制
this.watchObj = {name: 'popo'};

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

vue 监听对象的解决方法

  1. 使用 this.$set(object, key, value)
  2. 使用深度监听 deep: true,只能监听原有属性的变化,不能监听增加的属性
代码语言:txt
复制
mounted () {
  // 这里使用深度监听 blog 对象的属性变化,会触发 getCatalog 方法
  this.$watch('blog', this.getCatalog, {
    deep: true,
  });
},
  1. 使用 this.set(obj, key, val) 来新增属性(vue 无法监听 this.set 修改原有属性)
代码语言:txt
复制
this.$set(this.watchObj, 'age', 124);

delete this.watchObj‘name’(vue 无法监听 delete 关键字来删除对象属性)

  1. 使用 Object.assign 方法,直接赋值的原理监听(最推荐的方法)
代码语言:txt
复制
this.watchObj = Object.assign({}, this.watchObj, {
  name: 'xiaoyue',
  age: 15,
});

博客地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue 监听数组
    • vue 无法监听数组变化的情况
      • vue 无法监听数组变化的解决方案
      • vue 监听对象
        • vue 监听对象的解决方法
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档