watch 的基本用法和深度监控

普通写法

watch: {
    selectValue(newVal, oldVal) {
      if (newVal != oldVal) {
        this.selectValue = newVal;
        this.changeSelect();
        this.showTable();
      }
    },
    category(newVal, oldVal) {
      if (newVal != oldVal) {
        this.category = newVal;
        this.showTable();
      }
    },
  },

深度监控

 watch: {
          //  监听mydata对象，属性值 handler 固定写法
          mydata: {
              handler: function (newVal, oldVal) {
                  if (newVal !== oldVal) {
                      // 做处理
			          this.getDataList();
			        }
              },
              deep: true,
              // 代表开启深度监控。意思是数据的任何一个属性发生变化，监视函数需要执行
              immediate: true,
              // 如果immediate 设置为true, 代表代码一加载 立马执行监视函数
          }
      }

监控对象的属性(vue3写法)

vue3写法：监控对象的属性

import { reactive, ref, watch } from "vue";
 // ...
 
 // 监控这个对象中的gameName
	const detailState = reactive({
      groupId: "",
      productName: "",
      status: "0",
      principalUserId: "",
      operateUserId: "",
      remark: "",
      productGroupId: "",
      gameName: [], 
    });
    
	watch(()=>detailState.gameName,(n,o)=>{
      if(n != o){
        //...
      }
    });