Vue.js 中你不得不知道的 watch 和 watchEffect 侦听器

2023-12-07 06:32:21

Vue.js 中的响应式系统与侦听器的由来

Vue.js 的核心之一是响应式系统，它允许您在数据发生变化时自动更新组件。当您使用 Vue.js 开发应用程序时，您通常会在组件中定义一些属性来保存数据。当这些属性发生变化时，Vue.js 会自动触发相应的更新过程，以便将新的数据值反映在组件的 UI 中。

为了实现这一响应式行为，Vue.js 使用了侦听器 (watcher) 的概念。侦听器是一种特殊的函数，它可以监听某个属性的变化。当属性发生变化时，侦听器就会被触发，并执行相应的回调函数。

watch 和 watchEffect：两种常见的侦听器

在 Vue.js 中，有两种常见的侦听器：watch 和 watchEffect。这两种侦听器都有其各自的特点和用法。

watch

watch 侦听器是 Vue.js 中最常用的侦听器之一。它允许您监听某个属性的变化，并在属性发生变化时执行相应的回调函数。watch 侦听器的基本语法如下：

watch: {
  propertyName: {
    handler(newValue, oldValue) {
      // 当 propertyName 属性发生变化时执行此函数
    },
    immediate: true, // 立即执行回调函数
    deep: true // 监听对象和数组的深度变化
  }
}

在上面的示例中，我们监听了 propertyName 属性的变化。当 propertyName 属性发生变化时，侦听器就会执行 handler 回调函数。immediate 属性表示是否在组件实例化时立即执行回调函数。deep 属性表示是否监听对象和数组的深度变化。

watchEffect

watchEffect 侦听器是 Vue.js 3.0 中引入的新特性。它允许您在某个属性发生变化时执行一段逻辑代码。watchEffect 侦听器的基本语法如下：

watchEffect(() => {
  // 当依赖项发生变化时执行此函数
})

在上面的示例中，我们使用 watchEffect 侦听器来监听某个属性的变化。当依赖项发生变化时，侦听器就会执行回调函数。

watch 和 watchEffect 的区别

watch 和 watchEffect 侦听器都有其各自的特点和用法。下表总结了这两个侦听器之间的区别：

特性	watch	watchEffect
用法	监听某个属性的变化	监听依赖项的变化
回调函数	接受两个参数：新值和旧值	只接受一个参数：当前值
立即执行	可通过 `immediate` 选项设置	不可设置
深度监听	可通过 `deep` 选项设置	不可设置
性能开销	相对较高	相对较低