深入剖析 Vue 3 中 computed 和 watch 的奥秘

2024-01-02 02:30:39

摘要

Vue 3 中的 computed 和 watch 是两个强大的响应式特性，可用于高效地处理数据依赖性和变化响应。本文将深入剖析它们的源码实现，揭示它们的细微差别并提供最佳实践指南。

简介

Vue 3 的 computed 和 watch 是两个密切相关的响应式特性，用于处理数据依赖性和对变化的响应。computed 允许您创建依赖于其他响应式属性的计算属性，而 watch 允许您在响应式属性更改时执行回调函数。理解这两种特性的内部工作原理至关重要，以便在您的应用程序中有效地使用它们。

computed

computed 内部实现相对简单。它首先处理 getter 和 setter 函数，然后实例化一个新的 ComputedRef 对象。ComputedRef 对象包含计算属性的当前值，并跟踪对其依赖的响应式属性。每当依赖项更改时，ComputedRef 将重新计算并更新其值，触发依赖它的视图的更新。

watch

watch 的实现比 computed 复杂一些。它允许您指定一个回调函数，该函数将在监视的响应式属性更改时执行。回调函数接收两个参数：新值和旧值。您可以通过提供可选的选项对象来自定义 watch 的行为，例如立即调用回调或仅在值更改时调用。

区别

computed 和 watch 之间的主要区别在于它们的用途。computed 用于创建计算属性，而 watch 用于响应属性更改。computed 提供了一种更高效的方式来处理数据依赖性，因为它们只在依赖项更改时重新计算。另一方面，watch 提供了更大的灵活性，允许您在属性更改时执行自定义操作。

最佳实践

以下是使用 computed 和 watch 的最佳实践：

使用 computed 处理数据依赖性，使用 watch 响应属性更改。
尽可能使用 computed，因为它们更有效率。
如果您需要在属性更改时执行自定义操作，请使用 watch。
避免在 computed 中执行昂贵的计算，因为它们会在每次依赖项更改时重新计算。
如果您需要在组件卸载时取消 watch，请使用 watchEffect API。

示例

以下示例展示了如何使用 computed 和 watch：

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

export default {
  setup() {
    // computed 属性
    const doubledCount = computed(() => this.count * 2)

    // watch 回调
    watch(() => this.count, (newCount, oldCount) => {
      console.log(`Count changed from ${oldCount} to ${newCount}`)
    })

    return {
      count: 10,
      doubledCount,
    }
  },
}
</script>