6.0 vue3 watch监听函数（reactive篇）

上一篇：

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>  

下一篇：

vue3 watchEffect函数https://blog.csdn.net/qq_42543244/article/details/122291727