Vue3语法糖setup（二）

2023-12-17 10:31:17

Vue 3 中 watch 和 computed 的深入探究

在 Vue 3 中，watch 和 computed 这两个 API 仍然是开发响应式应用程序的强大工具，它们可以跟踪数据变化并派生计算属性。本篇博客将深入探索这两个 API 在 Vue 3 中的用法、选项和示例。

watch ：监视数据变化

watch 函数用于监控响应式数据的变化。当被监控的数据发生变化时，watch 函数就会触发，执行指定的回调函数。watch 函数接受两个参数：

目标数据： 要监控变化的数据。
回调函数： 在数据变化时执行的函数。

示例：

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    })

    return {
      count
    }
  }
}

watch 选项：

immediate： 如果你想在组件首次渲染时立即执行 watch 函数，可以将 immediate 选项设置为 true。
deep： 通过将 deep 选项设置为 true，watch 函数将对目标数据的每个属性进行深度监控，包括嵌套对象。
flush： 可以通过 flush 选项指定 watch 函数的执行时机。设置为 sync 会在组件更新后立即执行，而设置为 post 会在下一个 tick 执行。

computed：计算属性

computed 函数用于创建计算属性，这些属性是根据其他响应式数据的派生值。计算属性的值是只读的。computed 函数接受一个函数作为参数，该函数计算属性的值。

示例：

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const doubleCount = computed(() => {
      return count.value * 2
    })

    return {
      count,
      doubleCount
    }
  }
}

computed 选项：

cache： 如果将 cache 选项设置为 false，computed 函数将在每次访问时重新计算其值，而不是缓存结果。
setter： 定义一个 setter 函数，允许 computed 属性的值被修改。

深入探讨 watch 和 computed

watch vs computed：

watch 函数用于监控数据变化并执行回调函数，而 computed 函数用于创建计算属性。主要区别在于：

computed 属性是只读的，而 watch 函数的回调函数可以修改数据。
computed 函数比 watch 函数开销更低，因为它们只在依赖项发生变化时才重新计算。

使用 watch 和 computed 的最佳实践：

将 watch 函数用于需要立即执行的响应，例如更新用户界面。
使用 computed 属性来计算不经常更改的值，例如列表的总和或对象的长度。
尽可能使用 computed 属性，因为它们更有效。

代码示例：

以下代码示例演示了 watch 和 computed 的用法：

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

export default {
  setup() {
    const count = ref(0)

    const watchCount = watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`)
    })

    const doubleCount = computed(() => {
      return count.value * 2
    })

    const resetCount = () => {
      count.value = 0
    }

    return {
      count,
      watchCount,
      doubleCount,
      resetCount
    }
  }
}