vue3的watch监听方式

2021-10-10 14:05:11 阅读：207 来源： 互联网

标签：obj watch newVal oldValue vue3 test 监听

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});

标签：obj,watch,newVal,oldValue,vue3,test,监听
来源： https://blog.csdn.net/qq_44472790/article/details/120685453

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3的watch监听方式