Vue3 watch 侦听对象多个属性，让响应式数据更灵活

2024-01-29 00:44:24

Vue.js 3 中的 watch API：灵活监听响应式数据的利器

在前端开发领域，Vue.js 框架凭借其简洁高效的特点脱颖而出。在最新版本 Vue.js 3 中，watch API 进一步得到完善，赋予开发者更强大的数据侦听能力。本文将深入探讨 Vue.js 3 中的 watch API，涵盖其语法、用法以及在实际开发中的应用场景。

什么是 watch API？

想象一下，你正在开发一个电商网站。当用户在搜索栏中输入内容时，你希望网站实时更新搜索结果。这就是 watch API 发挥作用的地方。watch API 允许你在 Vue.js 组件中监听数据属性或对象的变更，并在变更发生时执行自定义逻辑。

语法详解

watch API 的基本语法如下：

watch(expression, callback, options)

expression： 要监听的属性或对象，可以是字符串、函数或表达式。
callback： 在属性或对象变更时执行的函数。
options： 可选参数，可指定侦听深度、是否立即执行回调函数等。

侦听对象多个属性

Vue.js 3 中，watch API 新添了一个强大的特性：支持侦听对象多个属性。只需使用以下语法即可：

watch(object, callback, options)

object： 要监听的属性或对象，可以是字符串、函数或表达式。
callback： 在属性或对象变更时执行的函数。
options： 可选参数，可指定侦听深度、是否立即执行回调函数等。

当对象中的某个属性发生变更时，callback 函数将被触发。值得注意的是，如果对象的某个属性是引用类型，则 callback 函数仅在引用发生变更时被触发，而不是属性内部数据发生变更时。

代码示例

<template>
  <input v-model="searchQuery">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  watch: {
    searchQuery(newValue, oldValue) {
      // 在 searchQuery 发生变更时执行此逻辑
      console.log(`搜索内容已更新为：${newValue}`);
    }
  }
}
</script>