Vue3中watch监听使用详解

下面详细讲解Vue3中watch监听的使用方法。

什么是Vue3中的watch监听

watch监听是Vue3的一个新特性，它可以用于观察 Vue 实例数据的变化，执行一些副作用操作。Vue3中watch监听的基本语法如下：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const message = ref('Hello, world!')

    watch(
      message, // 要监听的变量
      (newValue, oldValue) => {
        console.log(`New value: ${newValue}, Old value: ${oldValue}`)
      }
    )

    return {
      message
    }
  }
}
</script>

在上面的示例中，我们使用了Vue3的ref函数，来创建了一个响应式数据变量message，并在setup()函数中使用了watch来监听了message变量，在变量值发生变化时，直接将新旧值输出到控制台。

watch监听的使用方式

在Vue3中，watch监听支持多种不同的使用方式，常用的有以下几种：

监听一个变量

我们可以在setup()函数中使用watch来监听一个变量的改变，例如：

import { ref, watch } from 'vue'

export default {
  setup() {
    const message = ref('Hello, world!')

    watch(
      message,
      (newValue, oldValue) => {
        console.log(`New value: ${newValue}, Old value: ${oldValue}`)
      }
    )

    return {
      message
    }
  }
}

在上面的示例中，我们使用了Vue3的ref函数，来创建了一个响应式数据变量message，并在setup()函数中使用了watch来监听了message变量，在变量值发生改变时，即时输出到控制台中。

监听一个getter函数

除了监听变量外，我们也可以监听一个getter函数的返回值，例如：

import { ref, computed, watch } from 'vue'

export default {
  setup() {
    const message = ref('Hello, world!')
    const reversedMessage = computed(() => message.value.split('').reverse().join(''))

    watch(
      reversedMessage,
      (newValue, oldValue) => {
        console.log(`New value: ${newValue}, Old value: ${oldValue}`)
      }
    )

    return { message }
  }
}

在上面的示例中，我们使用了Vue3的computed函数，创建了一个计算属性 reversedMessage 用于对 message 变量进行翻转，并在 setup 函数中，使用 watch 监听 reversedMessage 变量，当翻转后的 reversedMessage 变量的返回值发生变化时，即时输出到控制台中。

监听多个变量

我们也可以一次性监听多个变量的变化，例如：

import { ref, watchEffect, reactive } from 'vue'

export default {
  setup() {
    const user = reactive({
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    })

    watchEffect(() => {
      console.log(`Full name: ${user.firstName} ${user.lastName}, age: ${user.age}`)
    })

    return { user }
  }
}

在上面的示例中，我们使用了Vue3的reactive函数，来创建了一个响应式对象user，并在setup()函数中使用了watchEffect来一次性监听了user对象中的firstName、lastName和age三个变量。当这些变量的任何一个值发生改变时，立即输出完整的用户信息到控制台中。