[JavaScript知识库]Vue3.0 监听reactive所定义的一个响应式数据

<template>
  <div>
    <h3>name：{{ person.name }}</h3>
    <h3>age：{{ person.age }}</h3>
    <h3>薪资：{{ person.job.j1.salary }}K</h3>
    <button @click="Modify">修改</button>
    <button style="margin: 0 20px" @click="add1">涨薪</button>
    <button @click="add2">涨年龄</button>
  </div>
</template>
<script>
import { reactive, watch } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "李四",
      age: 16,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    function Modify() {
      person.name = "张三";
      person.age = 20;
    }
    //情况一： 监视reactive所定义的一个响应式数据, 注意：此处无法正确的获取oldValue
    // watch(person, (newValue, oldValue) => {
    //   console.log(`person变化了`, newValue.job.j1);
    //   console.log(`person变化了`, oldValue.job.j1);
    // });

    //情况二：此处开启deep配置无效 (deep作用是开启深度监听)
    // watch(
    //   person,
    //   (newValue, oldValue) => {
    //     console.log(`person变化了`, newValue, oldValue);
    //   },
    //   { deep: false }
    // );

    //情况三： 监视reactive所定义的一个响应式数据中的某个属性
    // watch(
    //   () => person.age,
    //   (newValue, oldValue) => {
    //     console.log(`person.age变化了`, newValue, oldValue);
    //   }
    // );

    //特殊情况
    // watch(
    //   () => person.job,
    //   (newValue, oldValue) => {
    //     console.log(`person变化了`, newValue);
    //     console.log(`person变化了`, oldValue);
    //   },
    //   { deep: true }
    // );
    function add1() {
      person.job.j1.salary++;
    }
    function add2() {
      person.age++;
    }
    return {
      person,
      Modify,
      add1,
      add2,
    };
  },
};
</script>