掌握 Vue 3 中 watch（监听）的五种情况，全面提升响应式编程体验

2024-01-27 06:43:05

深入剖析 Vue 3 中 watch（监听）的五种情况

在 Vue 3 中，watch （监听）功能是响应式编程的基石，它赋予开发人员追踪和响应数据变化的强大能力。watch 函数由两个参数组成：需要监听的数据或计算属性以及数据或属性变化时触发的回调函数。

除了这两个基本参数，watch 函数还接受一个配置对象，允许开发人员进一步定制监听行为，满足特定需求。配置对象包含三个可选属性：

immediate： 如果设置为 true，watch 函数将在创建时立即触发回调函数。这意味着回调函数在组件首次渲染时立即执行一次，即使数据或计算属性尚未改变。

deep： 如果设置为 true，watch 函数将使用深度比较来检测数据变化。这意味着即使数据的某个深层属性发生变化，回调函数也会被触发。

flush： 此属性允许开发人员调整回调函数的触发时机。默认情况下，回调函数在组件更新之前被调用，这意味着回调函数访问的 DOM 是 Vue 更新之前的状态。如果想在回调函数中访问 Vue 更新后的 DOM，则需要将 flush 设置为 'post'。

灵活运用 watch，提升响应式编程体验

理解 watch 函数的五种不同情况后，我们可以灵活运用它们来增强响应式编程体验。以下是一些常见场景：

immediate：在组件首次渲染时立即获取数据

有时，我们需要在组件首次渲染时立即获取数据，以便在组件加载时显示这些数据。此时，我们可以使用 immediate 选项，使 watch 函数在组件首次渲染时立即触发回调函数，从而获取所需数据。

deep：监视对象或数组的深度变化

在某些情况下，我们需要监视对象或数组的深度变化，以便在这些数据结构的深层属性发生变化时也能及时做出响应。此时，我们可以使用 deep 选项，使 watch 函数使用深度比较来检测数据的变化。

flush：在组件更新之后执行回调函数

默认情况下，watch 函数的回调函数会在组件更新之前被调用。这意味着在回调函数中访问的 DOM 是 Vue 更新之前的状态。如果想在回调函数中能访问被 Vue 更新之后的 DOM，则需要将 flush 设置为 'post'。

代码示例

以下是一个使用 watch 函数和不同配置选项的示例：

// 监听 count 变化
watch('count', (newValue, oldValue) => {
  console.log(`count 发生了变化，新值：${newValue}，旧值：${oldValue}`);
});

// 监听 count 的深度变化
watch('count', (newValue, oldValue) => {
  console.log(`count 发生了深度变化，新值：${newValue}，旧值：${oldValue}`);
}, { deep: true });

// 在组件首次渲染时立即触发回调函数
watch('count', (newValue, oldValue) => {
  console.log(`count 发生了变化，新值：${newValue}，旧值：${oldValue}`);
}, { immediate: true });

// 在组件更新之后执行回调函数
watch('count', (newValue, oldValue) => {
  console.log(`count 发生了变化，新值：${newValue}，旧值：${oldValue}`);
}, { flush: 'post' });