vue3的watch监听方式

template部分

<template>
  <h1>方式一：监听一个属性</h1>
  <p>求和：{
   
   { sum }}</p>
  <button @click="sum++">方式一点我加1</button><br />


  ------------------------------------------------------------------------------------<br />
  <h2>方式二:监听多个属性</h2>
  <p>{
   
   { tipsmessage }}</p>
  <button @click="tipsmessage += 1">点我拼接1</button><br />


  ------------------------------------------------------------------------------------<br />
  <h1>方式三：监听对象</h1>
  <p>姓名：{
   
   { obj.name }}</p>
  <p>年龄：{
   
   { obj.age }}</p>
  <button @click="obj.age++">点我加年龄</button><br />


  ------------------------------------------------------------------------------------<br />
  <h1>方式四：监听对象某一个属性变化</h1>
  <p>薪资：{
   
   { obj.test.salary }}</p>
  <p>工作年限：{
   
   { obj.test.year }}</p>
  <button @click="obj.test.salary += 1000">点我涨薪</button>
  <button @click="obj.test.year++">点我添加工作年限</button>
  <br />
</template>

js部分：
使用reactive和ref混合响应式watch监听示例

 setup() {
    let sum = ref(122);
    let tipsmessage = ref("hello");
    const obj = reactive({
      name: "老王",
      age: "50",
      test: {
        salary: 3000,
        year: 1,
      },
    });
       // 方式一:监听单个基本数据类型(ref)
       		此处代码看对应示例
       		
       // 方式二:监多个基本数据类型(ref)
		   此处代码看对应示例
		   
	   // 方式三:监听对象(reactive)
			此处代码看对应示例
			
	   // 方式四:监听对象中某一个属性变化（reactive)
	   		此处代码看对应示例
	   		
	   // 方式五:监视对象中某几个属性（reactive)
	   		此处代码看对应示例
	   		
	   //  方式六:监视对象中的某一个对象 但我操作这某一对象里面的某一个属性obj.test（reactive)
	   		此处代码看对应示例
	
  return { sum, tipsmessage, obj };

方式一:监听单个基本数据类型(ref)

   watch(sum, (newVal, oldValue) => {
     		 console.log(newVal, oldValue);
    });

方式二:监多个基本数据类型(ref)

   watch([sum, tipsmessage], (newVal, oldValue) => {
      // [122, 'hello1']监听出来结果发现新的值和旧的值都是数组
      console.log(newVal, oldValue);
    });

方式三:监听对象(reactive)

     vue3当前存在问题：
     1.reactive和ref响应式使用proxy代理无法正确监听并获取对象旧的值
     2.强制开启深度监听,关闭无效(deep配置无效)
     
      watch(
      obj,
      (newVal, oldValue) => {
        // newVal=> {name: '老王', age: 52} oldValue=>{name: '老王', age: 52}
        console.log(newVal, oldValue);
      },
      { deep: false }
    );

方式四:监听对象中某一个属性变化（reactive)

 watch(
      () => obj.test.salary,
      (newVal, oldValue) => {
        console.log(newVal, oldValue);
      }
    );

方式五:监听对象中某几个属性（reactive)
监听属性salary和year

 // 薪资和年龄示例
watch([() => obj.test.salary, () => obj.test.year], (newVal, oldValue) => {
      console.log(newVal, oldValue);
      //[4000, 1][3000, 1]
      const arr = ["salary", "year"];
      for (let i = 0; i < newVal.length; i++) {
        if (newVal[i] !== oldValue[i]) {
          // 1年工作经验 3000 每年涨薪1000
          switch (arr[i]) {
            case "salary":
              obj.test.year = (obj.test[arr[i]] - 3000) / 1000 + 1;
              break;
            case "year":
              obj.test.salary = (obj.test[arr[i]] - 1) * 1000 + 3000;
              break;
          }
        }
      }
    });

方式六:监视对象中的某一个对象但我操作这某一对象里面的某一个属性obj.test（reactive)

注意：这种方式需要开启深度监听deep:true才能监视到某一对象属性的变化,此处deep配置有效

 watch(
      () => obj.test,
      (newVal, oldValue) => {
        console.log(newVal, oldValue, "啊哈哈哈");
        //{salary: 3000, year: 2} {salary: 3000, year: 2} '啊哈哈哈'
      },
      { deep: true }
    );
    return { sum, tipsmessage, obj };
  },
};

注意点: 使用ref的响应式watch监听
1.ref定义的基本类型使用watch监听时候不需要.value
示例：

 watch(sum, (newVal, oldValue) => {
      console.log(newVal, oldValue);
    });

2.ref定义对象类型使用watch监听对象时监听的对象外层可以使用2个方式
示例：

 const obj = ref({
      name: "老王",
      age: "50",
      test: {
        salary: 3000,
        year: 1,
      },
    });

(1).使用.value监听

   watch(obj.value, (newVal, oldValue) => {
      console.log(newVal, oldValue);
    });

(2).开启深度监听deep:true

   watch(obj, (newVal, oldValue) => {
      console.log(newVal, oldValue);
    },{deep:true});

vue3的watch监听方式

猜你喜欢