**

Vue2 watch监听对象改变4种方式

1.整个对象一起改变可以直接监听到。

data() {
    return {
      info: { name: "张三" },
    };
  },
watch: {
    info(newV, oldV) {
        console.log(newV,oldV);//输出新值、旧值
    },
  },
  methods: {
    changeInfo() {
    this.info = {name:"李四"}
    },
  },码片

2.deep:true可以监听对象内部数据改变。

  data() {
    return {
      info: { name: "张三" },
    };
  },
  watch: {
    info: {  //写成对象形式，就可以跟更多的属性。不加属性与原来的写法效果是一样的。
      handler: function (newV, oldV) {
        console.log(newV, oldV);
      },
      deep: true, //深度侦听
      immediate:true  //立即执行(页面刚进来也会执行)
    },
  },
  methods: {
    changeInfo() {
        this.info.name = "李四";
    },
  },

3.监听对象内部某个数据的用法。

data() {
    return {
      info: { name: "张三" },
    };
  },
  watch: {
    "info.name"(newV, oldV) {
      console.log(newV, oldV);
    },
  },
  methods: {
    changeInfo() {
      this.info.name = "李四";
    },
  },

4.高级一点的监听写法，还可以关闭监听

data() {
    return {
      info: { name: "张三" },
    };
  },
created() {
  //有返回值，拿到后可以用来取消侦听
    const unwatch =  this.$watch( "info", (newV, oldV) => {
        console.log(newV, oldV);
      },
      {
        deep: true,
        // immediate: true,
      }
    );
    unwatch() // 取消侦听
  },
  methods: {
    changeInfo() {
      this.info.name = "李四";
    },
  },

有帮助的话点个赞~~ 一起学习呀~~