Vue 3 中使用 watch 监听 Props 数据：全面指南

2024-01-16 19:45:32

Vue 3 中使用 watch API 轻松响应 props 数据变化

在构建交互式且响应变化的 Web 应用程序时，响应式数据管理至关重要。Vue 3 引入了强大的响应式系统，其中 watch API 扮演着关键角色，使你能够轻松地跟踪和响应 props 数据的变化。让我们深入探讨如何使用 watch API 在 Vue 3 中监听 props 数据，并了解一些最佳实践和注意事项。

什么是 watch API？

watch API 是 Vue 3 响应式系统中一个强大的工具，它允许你观察特定的数据属性或表达式，并在其值发生变化时执行回调函数。这对于响应 props 数据的变化以及相应地更新组件状态或行为非常有用。

监听基本数据类型

对于基本数据类型（如字符串、数字和布尔值），你可以直接使用 watch 来监听 props 数据的变化。例如，以下代码片段演示了如何监听 props.count 的变化：

<script>
import { watch } from 'vue'

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

    watch(() => this.props.count, (newValue, oldValue) => {
      // 当 props.count 发生变化时执行此回调函数
    })

    return { count }
  },

  props: {
    count: {
      type: Number,
      required: true
    }
  }
}
</script>

监听引用数据类型

对于引用数据类型（如数组和对象），使用 getter 函数返回值的形式才能触发监听。这是因为 Vue 3 仅对对象和数组本身的引用进行跟踪，而不是对它们的内部内容进行跟踪。以下代码片段展示了如何监听 props.tasks 的变化：

<script>
import { watch } from 'vue'

export default {
  setup() {
    const tasks = Vue.ref([])

    watch(() => this.props.tasks, (newValue, oldValue) => {
      // 当 props.tasks 发生变化时执行此回调函数
    })

    return { tasks }
  },

  props: {
    tasks: {
      type: Array,
      required: true
    }
  }
}
</script>