在 Vue 3 中 watch vs watchEffect

冷不防 2023-09-27 21:53 110阅读 0赞

## watch 和 watchEffect 的区别 ##

### watch 基本使用 ###

`watch`监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。

<template>
      <p>{
       { message }}</p>
      <button @click="changeMsg">更改 message</button>
    </template>
    <script setup lang="ts">
    import { ref, watch } from "vue";
    const message = ref("学习vue3");
    watch(message, (newValue, oldValue) => {
      console.log("新的值:", newValue);
      console.log("旧的值:", oldValue);
    });
    const changeMsg = () => {
      message.value = "张三";
    };
    </script>

以上代码中我们点击按钮就会更改响应式变量 message 的值。我们又使用 `watch`监听器监听了 message 变量，当它发生变化时，就会触发 watch 监听函数中的回调函数，并且回调函数默认接收两个参数：新值和旧值。

**注意：当我们第一进入页面时，`watch` 监听函数的回调函数是不会执行的。**

### watch 监听类型 ###

*  ref 和计算属性 可以监听计算属性

const message = ref("学习vue3");
    const newMessage = computed(() => {
      return message.value;
    });
    watch(newMessage, (newValue, oldValue) => {
      console.log("新的值:", newValue);
      console.log("旧的值:", oldValue);
    });

当我们 message 发生变化时，计算属性 newMessage 也会重新计算得出新的结果，我们 `watch`监听函数是可以监听到计算属性变化的。

*  getter 函数

<template>
      <img alt="Vue logo" src="./assets/logo.png" />
      <p>{
       { message }}</p>
      <p>{
       { x1 + x2 }}</p>
      <button @click="changeMsg">更改 message</button>
    </template>
    <script setup lang="ts">
    import { ref, watch } from "vue";
    const message = ref("学习vue3");
    const x1 = ref(12);
    const x2 = ref(13);
    watch(
      () => x1.value + x2.value,
      (newValue, oldValue) => {
        console.log("新的值:", newValue);
        console.log("旧的值:", oldValue);
      }
    );
    const changeMsg = () => {
      message.value = "张三";
      x1.value = 14;
      x2.value = 23;
    };
    </script>

### watchEffect ###

`watchEffect`也是一个监听器，只不过它不会像 watch 那样接收一个明确的数据源，它只接收一个回调函数。而在这个回调函数当中，它会自动监听响应数据，当回调函数里面的响应数据发生变化，回调函数就会立即执行。

const number = reactive({ count: 0 });
    const countAdd = () => {
      number.count++;
    };
    watchEffect(()=>{
      console.log("新的值:", number.count);
    })

以上代码中，当我们第一次进入页面时，number 响应数据从无到有，这个时候就会触发 watchEffect 的回调函数，因为在 watchEffect 回调函数中使用了 number 响应数据，所以它会自动跟踪 number 数据的变化。当我们点击按钮更改 count 的值时，watchEffect 中的回调函数便会再次执行。

### watch 和 watchEffect 区别 ###

*  watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。
 *  watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。
 *  watch 在响应数据初始化时是不会执行回调函数的，watchEffect 在响应数据初始化时就会立即执行回调函数。