关于 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. 利用索引直接设置一个数组项时，例如：arrindexOfItem = newValue;
2. 修改数组的长度时，例如：arr.length = newLength;

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

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

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

1. 修改数组的长度 长度大于原数组就将后续元素设置为 undefined 长度小于原数组就将多余元素截掉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);
},

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

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,