vue3学习之watch

仅记录笔记

<template>
  <div>
    <h2>当前求和为:{{num}}</h2>
    <button @click="sum++">点我加1</button>
    <br />
    <h2>watch监听多个ref声明:{{msg}}</h2>
    <button @click="msg+'!'">点我加1</button>
    <br />
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h2>薪水:{{person.job.j1}} k</h2>
    <button @click="person.name+'!'">修改姓名</button>
    <button @click="person.age++">年龄加1</button>
    <button @click="person.job.j1++">加钱</button>
  </div>
</template>
<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    // 声明
    let num = ref(0);
    let msg = "watch";
    let person = {
      name: "张三",
      age: 18,
      job: {
        j1: {
          money: 10
        }
      }
    };
    // 使用watch
    // watch 可以接收三个参数  第一个是要监听的对象 第二个是数据处理变化,第三个是配置项  immediate:true是刚一进去就监听一次
    // 情况一:监视ref所定义的一个响应式数据
    watch(
      sum,
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      { immediate: true }
    );

    // 情况二:监视多个ref所声明的响应式数据
    // 多个的话是第一个参数是 用数组传递 也可以调用多次watch(因为在vue3里面watch是一个函数)
    watch(
      [num, msg],
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      { immediate: true }
    );

    // 情况三:监视reactive所定义的一个响应式数据的全部属性
    /*
      1.注意:使用reactive定义的数据 无法正确获取oldValue
      2.注意:强制开启了深度检测(deep配置无效)
     */
    watch(
      person,
      (newValue, oldValue) => {
        console.log("person变化了", newValue, oldValue);
      },
      { deep: true } //此处配置的deep无效
    );

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

    // 情况五:监视reactive所定义的一个响应式数据的一些属性
    // 使用数组 把情况四要监视的属性放到数组内
    watch([() => person.age, () => person.name], (newValue, oldValue) => {
      console.log("person.age变化了", newValue, oldValue);
    });

    //特殊情况
    //当监视的声明的对象内的属性 还是一个对象,因为不是用reactive直接声明的
    watch(
      () => person.job,
      (newValue, oldValue) => {
        console.log("person.job变化了", newValue, oldValue);
      },
      { deep: true }//此处由于监视的是reactive定义的对象内的某个属性,所以deep配置有效
    );
    return {
      num,
      msg,
      person
    };
  }
};
</script>