watch监听（一篇文章彻底搞懂watch监听）

一、监听不同形式的数据源

1.监听一个ref

监听一个ref 复制代码

<template>
  <div>
    <input v-model="message" />
    <p>老数据：{{ oldMessages }}</p>
    <p>新数据：{{ newMessages }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
let message = ref("");
let newMessages = ref();
let oldMessages = ref();
watch(message, (newMessage, oldMessage) => {
  newMessages.value = newMessage;
  oldMessages.value = oldMessage;
});
</script>

直接监听一个ref值，可以拿到新旧数据

2.监听一个reactive

监听reactive的属性复制代码

<template>
  <div>
    <p>老数据：{{ oldMessages }}</p>
    <p>新数据：{{ newMessages }}</p>
    <button @click="handleEdit">修改obj的name</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
const num = ref(0);
const obj = reactive({
  name: "张三",
  old: 18,
});
let newMessages = ref();
let oldMessages = ref();
watch(
  () => obj.name,
  (newMessage, oldMessage) => {
    newMessages.value = newMessage;
    oldMessages.value = oldMessage;
  }
);
const handleEdit = () => {
  num.value++;
  obj.name = `李四${num.value}`;
};
</script>

这里监听一个响应式对象的时候，使用到了getter函数，只有当监听的对象的属性值发生变化时，才会触发监听

3.监听一个props

监听一个props 复制代码

<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  user: {
    type: Array,
    dafalut: () => [],
  },
});
let newMessages = ref();
let oldMessages = ref();
watch(
  () => props.user,
  (newMessage, oldMessage) => {
    newMessages.value = newMessage;
    oldMessages.value = oldMessage;
  }
);
</script>

这里直接监听了user，当user的引用发生变化时，会触发监听；当需要监听user数组内部元素/属性变化时，必须开启deep:true深监听

4.监听多个数据源

监听多个数据源复制代码

<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  user: {
    type: Array,
    default: () => [],
  },
  student: {
    type: Array,
    default: () => [],
  },
});
let newUsers = ref();
let newStudents = ref();
let oldUsers = ref();
let oldStudents = ref();
watch(
  [() => props.user, () => props.student],
  ([newUser, newStudent], [oldUser, oldStudent]) => {
    //新数据
    newUsers.value = newUser;
    newStudents.value = newStudent;
    //旧数据
    oldUsers.value = oldUser;
    oldStudents.value = oldStudent;
  }
);
</script>

二、监听的额外配置项

1.开启深层监听

通过 { deep : true } 开启深层监听

<math xmlns="http://www.w3.org/1998/Math/MathML"> 注意：深层监听会遍历被监听对象中的所有嵌套属性，开销较大，仅在必要时使用 \color{red}{注意：深层监听会遍历被监听对象中的所有嵌套属性，开销较大，仅在必要时使用} </math>注意：深层监听会遍历被监听对象中的所有嵌套属性，开销较大，仅在必要时使用

2.即时回调（页面加载时立即执行一次）

通过 { immediate ：true }开启，会在创建监听器时，立即执行一次。适用于请求一些初始数据，并且在相关状态变化时，重新请求数据

3.一次性监听

通过 { once : true }开启，仅在被监听的数据发生变化后，回调触发一次

4.回调促发时机

4.1 { flush : 'pre' } : (默认值) 回调会在所属组件的DOM更新之前调用

4.2 { flush : 'post' } : 回调会在所属组件的DOM更新之后调用

4.3 { flush : 'sync' } : 同步监听器，会在vue进行任何更新前触发

三、watchEffect()监听

1.基本用法

watchEffect()基本用法复制代码

<script setup lang="ts">
import { ref, watchEffect } from "vue";
const name = ref();
const old = ref();
watchEffect(async () => {
  console.log("新数据", name.value, old.value);
});
</script>

watchEffect()接收一个回调函数作为参数

2.核心特性

2.1 自动追踪依赖：不用像watch那样明确监听源，会自动追踪并监听响应式依赖

2.2 立即执行回调函数，不用指定 immediate ：true

2.3 只能获取最新值，无法获取旧值

四、停止监听

在多数情况下，不需要关心怎样停止监听，因为它会在宿主组件卸载时自动停止；但是，如果我们在异步回调中创建监听器时，就需要手动停止监听器

停止监听复制代码

<script setup lang="ts">
import { onUnmounted, ref, watch } from "vue";
const name = ref();
const unWatch = watch(name, (newName) => {
  console.log(newName);
});

onUnmounted(() => {
  unWatch();
});
</script>

通过在onUnmounted生命周期中调用watch或watchEffect返回的函数来停止监听