Several ways of watch monitoring in Vue

Ordinary types and object types, monitoring is not the same

Ordinary types (names of direct data are treated as function names)

  data() {
    return {
      num: 1,
    };
  },
   
  watch: {
    num(newvalue, old) {
      console.log("111");
    }
  },

Object type (several ways of writing)

  data() {
    return {
      obj: {
        a: 1,
      },
    };
  },

  watch: {
    //第一种
     obj: {
       handler(newValue, oldValue) {
         console.log("222");
       },
       deep: true,
       immediate: true,
     },
    //第二种
    "obj.a"(newValue, oldValue) {
        
    },
  },

There is also the use of vm.$watch to monitor

Can be used during the life cycle

The first parameter is the source to listen to;

The second parameter is the listened callback function callback;

The third parameter is additional other options, such as deep, immediate;