揭秘Vue3+vite+Ts+pinia中的watch与watchEffect，提升响应式编程体验

2023-12-23 09:30:27

前言

在Vue3+vite+Ts+pinia的生态系统中，响应式编程的概念对于构建和维护大型应用程序至关重要。watch和watchEffect是两个强大的工具，可帮助开发人员监控数据变化并相应地更新用户界面。本文将对这两个概念进行深入探讨，帮助读者理解它们是如何工作的以及如何有效地利用它们来构建更具响应性的应用程序。

5.1 watch概述

watch是一个API，允许开发人员在数据发生变化时执行某些操作。它使用回调函数的形式，回调函数接受一个参数，该参数包含了发生变化的数据的当前值。

使用watch时，有几个关键点需要注意：

watch只能监听响应式数据，即使用reactive()或ref()创建的数据。
watch不能监听普通JavaScript对象或数组。
watch的回调函数会在数据变化时立即执行，除非显式指定了lazy选项。
watch的回调函数可以是同步的或异步的。
watch可以接收多个参数，每个参数代表一个需要监听的数据。

5.2 监听ref基本类型

ref是一个API，允许开发人员创建和操作响应式基本类型。基本类型包括字符串、数字和布尔值。

要监听ref基本类型，可以使用watch API。例如，以下代码监听一个名为count的ref变量的变化：

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  // 当count发生变化时，这个回调函数将被调用
  console.log(`count has changed from ${oldValue} to ${newValue}`)
})

5.3 监听ref对象类型

ref还可以用来创建和操作响应式对象。对象类型包括数组、对象和函数。

要监听ref对象类型，可以使用watch API。例如，以下代码监听一个名为user的ref变量的变化：

import { ref, watch } from 'vue'

const user = ref({
  name: 'John Doe',
  age: 30
})

watch(user, (newValue, oldValue) => {
  // 当user发生变化时，这个回调函数将被调用
  console.log(`user has changed from ${JSON.stringify(oldValue)} to ${JSON.stringify(newValue)}`)
})

5.4 监听reactive类型

reactive是一个API，允许开发人员创建和操作响应式对象。reactive对象与ref对象类似，但它们有一些关键的区别。

首先，reactive对象是深度响应的，这意味着对象的嵌套属性也会被自动跟踪。其次，reactive对象不能被直接修改，必须使用.value访问器。

要监听reactive类型，可以使用watch API。例如，以下代码监听一个名为user的reactive变量的变化：

import { reactive, watch } from 'vue'

const user = reactive({
  name: 'John Doe',
  age: 30
})

watch(user, (newValue, oldValue) => {
  // 当user发生变化时，这个回调函数将被调用
  console.log(`user has changed from ${JSON.stringify(oldValue)} to ${JSON.stringify(newValue)}`)
})

5.5 监听对象属性

有时，我们可能只需要监听对象的特定属性，而不是整个对象。我们可以使用watch API来实现这一点。

例如，以下代码监听一个名为user的reactive对象的name属性的变化：

import { reactive, watch } from 'vue'

const user = reactive({
  name: 'John Doe',
  age: 30
})

watch(() => user.name, (newValue, oldValue) => {
  // 当user.name发生变化时，这个回调函数将被调用
  console.log(`user.name has changed from ${oldValue} to ${newValue}`)
})

5.6 监听多个数据

watch API还可以用于监听多个数据。例如，以下代码监听三个数据：一个名为count的ref变量、一个名为user的reactive对象以及一个名为flag的布尔值：

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

const count = ref(0)
const user = reactive({
  name: 'John Doe',
  age: 30
})
const flag = ref(true)

watch([count, user, flag], ([countValue, userValue, flagValue]) => {
  // 当count、user或flag发生变化时，这个回调函数将被调用
  console.log(`count: ${countValue}, user: ${JSON.stringify(userValue)}, flag: ${flagValue}`)
})

5.7 解除watch监听

有时，我们可能需要解除watch监听。我们可以使用watch API的返回值来实现这一点。

例如，以下代码创建一个watch监听器，然后在5秒后解除监听：

import { ref, watch } from 'vue'

const count = ref(0)

const unwatch = watch(count, (newValue, oldValue) => {
  // 当count发生变化时，这个回调函数将被调用
  console.log(`count has changed from ${oldValue} to ${newValue}`)
})

setTimeout(() => {
  unwatch()
}, 5000)

5.8 watchEffect

watchEffect是一个API，它允许开发人员在数据发生变化时执行某些操作，与watch不同的是，watchEffect的回调函数将在组件的整个生命周期中持续执行，直到组件被销毁。

watchEffect API的使用方式与watch API类似。例如，以下代码使用watchEffect API来监听一个名为count的ref变量的变化：

import { ref, watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  // 当count发生变化时，这个回调函数将被调用
  console.log(`count has changed to ${count.value}`)
})