Watch的使用

watch的API完全等同于组件watch选项的Property：

• watch需要侦听特定的数据源，并在回调函数中执行副作用；
• 默认情况下它是惰性的，只有当被侦听的源发生变化时才会执行回调(也就是说，当页面初次渲染的时候，不会执行回调)；

与watchEffect的比较，watch允许我们：

• 懒执行副作用（页面第一次渲染的时候不会直接执行回调）；
• 更具体的说明当哪些状态发生变化时，触发侦听器的执行；
• 访问侦听状态变化前后的值；

watch侦听函数的数据源有两种类型：

• 一个getter函数：但是该getter函数必须引用可响应式的对象（比如reactive或者ref或者props）；
• 直接写入一个可响应式的对象，reactive或者ref（比较常用的是ref）；

watch可以侦听单个数据源，也可以侦听多个数据源

侦听单个数据源

watch侦听单个数据源，数据源的类型可以是:

• 一个getter函数：但是该getter函数必须引用可响应式的对象（比如reactive或者ref或者props）；
• 可响应式对象，reactive对象或ref对象，一般多使用ref对象

1.数据源为getter函数

watch监听的数据源如果为getter函数，此函数中必须有对可响应式对象的引用

<template>
  <div>
    <div>student名字:{{ student.name }}, 年龄: {{ student.age }}</div>
    <div>info班级:{{ info.class }}, 分数: {{ info.score }}</div>
    <div>friend姓名:{{ friend.name }}, 性别: {{ friend.sex }}</div>
    <button @click="changeStudentName">修改student名字</button>
    <button @click="changeInfoScore">修改info分数</button>
    <button @click="changeFriendName">修改friend分数</button>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    const student = reactive({ name: "why", age: 18 });
    const info = ref({ class: "六一", score: 98 });
    const friend = { name: "李红", sex: "女" };

    //监听可响应式对象reactive的某个属性的改变
    watch(
      () => student.name,
      (newVal, oldVal) => {
        console.log("newName:", newVal, "oldName:", oldVal);
      }
    );
    //监听可响应式对象ref的某个属性的改变
    watch(
      () => info.value.score,
      (newVal, oldVal) => {
        console.log("newScore:", newVal, "oldScore:", oldVal);
      }
    );
    //监听普通对象的某个属性的改变:watch无法监听普通对象属性的改变
    watch(
      () => friend.name,
      (newVal, oldVal) => {
        console.log("newFriendName:", newVal, "oldFriendName:", oldVal);
      },
      {
        deep: true,
      }
    );

    const changeStudentName = () => {
      student.name = "koby";
    };
    const changeInfoScore = () => {
      info.value.score = 80;
    };
    const changeFriendName = () => {
      friend.name = "小雨";
      console.log(111, friend.name)
    };

    return {
      student,
      info,
      friend,
      changeStudentName,
      changeInfoScore,
      changeFriendName,
    };
  },
};
</script>

<style lang="scss" scoped></style>

image.png

friend为一个普通对象，watch是监听不到的

2.数据为可响应式对象reactive对象或ref对象或props对象的某个属性

<template>
  <div>
    <h1>{{ title }}</h1>
    <div>名字:{{ info.name }}, 年龄: {{ info.age }}</div>
    <button @click="changeName">修改名字</button>
    <button @click="changeTitle">修改标题</button>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    const info = reactive({ name: "why", age: 18 });
    const title = ref("hello world");

    //1.监听目标为一个可响应式对象:reactive/ref对象
    //如果是reactive,newVal和oldVal都为reactive对象
    //如果是ref对象,newVal和oldVal为ref对象的value的值
    watch(info, (newVal, oldVal) => {
      console.log("newVal:", newVal, "oldVal:", oldVal);
    });
    watch(title, (newVal, oldVal) => {
      console.log('newVal:', newVal, 'oldVal:', oldVal)
    })


    //2.监听数据源为reactive对象时，如果想oldVal和newVal是一个普通对象,把其写法一个返回普通对象的getter函数
    watch(() => ({...info}), (newVal, oldVal) => {
      console.log('newVal:', newVal, 'oldVal:', oldVal)
    })


    const changeName = () => {
      info.name = "koby";
    };
    const changeTitle = () => {
      title.value = "今天天气不错";
    };

    return {
      info,
      title,
      changeName,
      changeTitle,
    };
  },
};
</script>

<style lang="scss" scoped></style>

image.png

3.watch监听props对象的某个属性

props对象本身也是一个响应式对象，监听可响应式对象的属性，需要把其转换为getter函数
App.vue

<template>
  <div>
    <my-home :info="info" />
    <button @click="changeInfo">修改info</button>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
import MyHome from "./Home.vue";
export default {
  components: {
    MyHome,
  },
  setup() {
    const info = reactive({
      name: "why",
      age: 18,
      friend: { name: "koby" },
    });

    const changeInfo = () => {
      info.friend.name = "lily";
    };

    return {
      info,
      changeInfo,
    };
  },
};
</script>

<style lang="scss" scoped></style>

Home.vue

<template>
  <div>
    <div>home名字:{{ info.name }}, 年龄: {{ info.age }}</div>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  props: {
    info: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    watch(
      () => props.info,
      (newVal, oldVal) => {
        console.log("newVal:", newVal, "oldVal:", oldVal);
      },
      {
        deep: true,
      }
    );

    return {};
  },
};
</script>

<style lang="scss" scoped></style>

image.png

侦听多个数据源

<template>
  <div>
    <h1>{{ title }}</h1>
    <div>名字:{{ info.name }}, 年龄: {{ info.age }}</div>
    <button @click="changeName">修改名字</button>
    <button @click="changeTitle">修改标题</button>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    const info = reactive({ name: "why", age: 18 });
    let title = ref("hello world");

    //监听目标为一个数组:监听多个数据源
    watch([info, title], ([newInfo, newTitle], [oldInfo, oldTitle]) => {
      console.log("newInfo:", newInfo, "oldInfo:", oldInfo);
      console.log("newTitle:", newTitle, "oldTitle:", oldTitle);
    });

    //如果希望newInfo, oldInfo不是reactive对象，是普通对象
    watch(
      [() => ({ ...info }), title],
      ([newInfo, newTitle], [oldInfo, oldTitle]) => {
        console.log("newInfo:", newInfo, "oldInfo:", oldInfo);
        console.log("newTitle:", newTitle, "oldTitle:", oldTitle);
      }
    );

    const changeName = () => {
      info.name = "koby";
    };
    const changeTitle = () => {
      title.value = "今天天气不错";
    };

    return {
      info,
      title,
      changeName,
      changeTitle,
    };
  },
};
</script>

<style lang="scss" scoped></style>

image.png

watch的选项

如果我们希望侦听一个深层的侦听，那么依然需要设置 deep 为true：
也可以传入 immediate 立即执行；

watch的深度监听

<template>
  <div>
    <div>名字:{{ info.name }}, 年龄: {{ info.age }}</div>
    <button @click="changeName">修改名字</button>
    <button @click="changeStudent">修改studnet同桌名字</button>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    const info = reactive({
      name: "why",
      age: 18,
      friend: { name: "koby" },
    });
    const student = ref({
      class: "六一",
      score: 98,
      deskmate: { name: "lily" },
    });

    //1.监听目标为reactive对象,默认是深度侦听的
    watch(info, (newVal, oldVal) => {
      console.log("newVal:", newVal, "oldVal:", oldVal);
    });
    //2.监听目标为ref对象, 默认不是深度监听，需要手动开启手动监听
    watch(
      student,
      (newVal, oldVal) => {
        console.log("newStudent:", newVal, "oldStudent:", oldVal);
      },
      {
        deep: true, //开启深度侦听
      }
    );

    //2.监听目标为普通对象,不是深度侦听的,需要手动开启深度监听
    watch(
      () => ({ ...info }),
      (newVal, oldVal) => {
        console.log("newVal:", newVal, "oldVal:", oldVal);
      },
      {
        deep: true, //开启深度侦听
        immediate: true, //首次渲染说的时候,也监听一次
      }
    );

    const changeName = () => {
      info.friend.name = "curry";
    };
    const changeStudent = () => {
      student.value.deskmate.name = "jack";
    };

    return {
      info,
      changeName,
      changeStudent,
    };
  },
};
</script>

<style lang="scss" scoped></style>

image.png

此文档主要内容来源于王红元老师的vue3+ts视频教程