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

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

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

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

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

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

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

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

watch: {
  obj: {
    // 这里深度监听变化，直接触发下面方法
    handler(curVal, oldVal) {
      // TODO
    },
    deep: true,
    immediate: true // 是否第一次触发
  }
}

this.$set(this.watchObj, 'age', 124);
this.$delete(this.watchObj, 'age')

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

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

watch: {
  'obj.name'(curVal, oldVal) {
    // TODO
  }
}