关于vue.js:深入解读vue3-watch踩坑记录

40次阅读

共计 1795 个字符，预计需要花费 5 分钟才能阅读完成。

间接上代码，总共测试了上面这些状况（看正文）

<template>
  <h2> 以后求和为：{{sum}}</h2>
  <button @click="sum++"> 点我 +1</button>
  <hr />
  <h2> 以后的信息为：{{msg}}</h2>
  <button @click="msg +='！'"> 批改信息 </button>
  <hr />
  <h2> 姓名：{{person.name}}</h2>
  <h2> 年龄：{{person.age}}</h2>
  <h2> 薪资：{{person.job.j1.salary}}K</h2>
  <button @click="person.name +='~'"> 批改姓名 </button>
  <button @click="person.age++"> 增长年龄 </button>
  <button @click="person.job.j1.salary++"> 涨薪 </button>
</template>

<script>
import {ref, reactive, watch} from "vue";
export default {
  name: "Demo",
  setup() {
    // 数据
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {salary: 3,},
      },
    });

    // 状况一：监督 ref 所定义的一个响应式数据
    watch(
      sum,
      (newValue, oldValue) => {console.log("sum 变了", newValue, oldValue);
      },
      {immediate: true}
    );

    // 状况二：监督 ref 所定义的多个响应式数据
    watch([sum, msg],
      (newValue, oldValue) => {console.log("sum 或 msg 变了", newValue, oldValue);
      },
      {immediate: true}
    );

    /* 
    状况三：监督 reactive 所定义的一个响应式数据的全副属性
        1. 留神：此处无奈正确的获取 oldValue
        2. 留神：强制开启了深度监督（deep 配置有效）*/
    watch(
      person,
      (newValue, oldValue) => {console.log("person 变动了", newValue, oldValue);
      },
      {deep: false}
    ); // 此处的 deep 配置有效

    // 状况四：监督 reactive 所定义的一个响应式数据中的某个属性
    // watch(//   () => person.name,
    //   (newValue, oldValue) => {//     console.log("person 的 name 变动了", newValue, oldValue);
    //   }
    // );

    // 状况五：监督 reactive 所定义的一个响应式数据中的某些属性
    // watch([() => person.name, () => person.age], (newValue, oldValue) => {//   console.log("person 的 name 或 age 变动了", newValue, oldValue);
    // });

    // 非凡状况
    // watch(//   () => person.job,
    //   (newValue, oldValue) => {//     console.log("person 的 job 变动了", newValue, oldValue);
    //   },
    //   {deep: true}
    // ); // 此处因为监督的是 reactive 素定义的对象中的某个属性，所以 deep 配置无效

    // 返回一个对象（罕用）return {
      sum,
      msg,
      person,
    };
  },
};
</script>

总结：