标签：reactive watch deep newVal oldVal 6.0 data 监听

上一篇：

vue3 watch监听函数 （ref篇）https://blog.csdn.net/qq_42543244/article/details/122203802?spm=1001.2014.3001.5501上篇说到的是监听ref声明的数据，今天记录监听reactive声明的数据，其实差别并不是不大，但是其中有一些坑，特此记录，请看代码（注释也要仔细看哦）

<template>
  <h1>reactive数据类型</h1>
  <h2>姓名：{{ data.name }}</h2>
  <h2>年龄：{{ data.age }}</h2>
  <h2>爱好：{{ data.hobby }}</h2>
  <h2>工作薪酬：{{ data.job.j1.money }} K</h2>
  <button @click="data.name = '李四'">改变姓名</button>
  <button @click="data.age += 1">改变年龄</button>
  <button @click="data.hobby[0] = '踢足球'">改变爱好</button>
  <button @click="data.job.j1.money += 1">改变薪酬</button>
</template>

<script>
import { reactive, watch } from "vue";
export default {
  name: "Demo",
  setup() {
    let data = reactive({
      name: "张三",
      age: 18,
      hobby: ["打篮球", "玩游戏", "听音乐"],
      job: {
        j1: {
          money: 10,
        },
      },
    });
    // 监听reactive数据
    /* 
        此时是有问题的：oldVal会和newVal数据保持一致，当data里面的任意值改变，都会触发该监听,强制开启深度监听，deep配置在此时是无效的
    */
    watch(data, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });

    //  监听reactive中的某个值
    // 基础类型值
    watch(
      () => data.name,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      }
    );
    // 数组 此时deep的配置生效(此处的oldVal也是有问题的)
    watch(
      () => data.hobby,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { deep: true }
    );
    // 对象  此时deep的配置生效(此处的oldVal也是有问题的)  若要监听对象内的money： data.job.j1.money 即可
    watch(
      () => data.job,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { deep: true }
    );
    // 监听reactive中的某些值
    // 都为基本数据类型   一切正常
    watch([() => data.name, () => data.age], (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });
    //基本数据类型+数组/对象  deep有效 基本数据类型oldVal正常  引用数据类型oldVal存在问题
    watch(
      [() => data.name, () => data.hobby],
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { deep: true }
    );
    //引用数据类型+引用数据类型  deep有效  引用数据类型oldVal存在问题
    watch(
      [() => data.hobby, () => data.job],
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      { deep: true }
    );
    return {
      data,
    };
  },
};
</script>

标签：reactive,watch,deep,newVal,oldVal,6.0,data,监听
来源： https://blog.csdn.net/qq_42543244/article/details/122281029

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