前言

我们都知道在Vue3中，watch是一个用于观察和响应组件中数据变化的强大工具。在Vue 3中，watch属性不仅可以用于监视Vue实例数据的变化，并在数据发生变化时执行相应的操作；也可以在监视数据变化的同时，在变化时执行回调函数，从而实现对数据的监听和响应。本文将主要讲述watch的扩展内容：immediate以及deep。

watch的基本用法

示例

js 复制代码

import { watch, reactive } from 'vue';

const state = reactive({
  count: 0
});

watch(() => state.count, (newValue, oldValue) => {
  console.log(`count值从${oldValue}变为${newValue}`);
});

state.count++; // 控制台输出：count值从0变为1

在这个示例中，我们首先导入了Vue 3中的watch函数和reactive函数。然后创建了一个名为state的响应式对象。接着我们使用watch函数监视state.count的变化，并传入一个回调函数，该回调函数会在count属性发生变化时被调用。最后，我们通过修改state.count的值来触发watch的回调函数，从而验证监视功能的有效性。

immediate属性

immediate属性用于指定在初始化时是否立即执行watch回调函数。默认情况下，Vue 3中的watch不会在初始化时执行回调函数，但可以通过设置immediate属性为true来实现。这对于需要在数据进行首次绑定时执行某些操作的场景有着很大的作用。

示例

js 复制代码

import { watch, reactive } from 'vue';

const state = reactive({
  count: 0
});

watch(
  () => state.count,
  (newValue, oldValue) => {
    console.log(`count值从${oldValue}变为${newValue}`);
  },
  { immediate: true } // 立即执行回调函数
);

// 控制台输出：count值从undefined变为0

在这个示例中，我们基于上一个示例，通过设置immediate: true来启用了立即执行回调函数的功能。这意味着在创建watcher时，watch回调函数将立即执行一次，而不需要等待数据变化。在这个示例中，我们看到在初始化时，回调函数立即被调用，并且在控制台中输出了count的初始值。这样可以在初始加载页面时执行一些必要的操作。

deep属性

deep属性用于深度监听对象或数组的变化，当对象或数组的属性发生变化时，也会触发watch回调函数。默认情况下，Vue 3中的watch只会浅层监听对象的变化，即对象的属性变化不会触发watch回调函数，但可以通过设置deep属性为true来实现。通过使用deep属性，我们可以对对象的仍和层级进行监听，包括对象内部属性的变化。

示例

js 复制代码

import { watch, reactive } from 'vue';

const state = reactive({
  obj: { value: 0 }
});

watch(
  () => state.obj,
  (newValue, oldValue) => {
    console.log(`obj值从${JSON.stringify(oldValue)}变为${JSON.stringify(newValue)}`);
  },
  { deep: true } // 深度监听对象变化
);

state.obj.value++; // 控制台输出：obj值从{"value":0}变为{"value":1}

在这个示例中，我们展示了如何使用deep: true来深度监听对象的变化。首先创建了一个包含一个名为obj的响应式对象，其中包含一个名为value的属性，初始值为0。然后通过watch函数来监视state.obj的变化，并设置了deep: true以深度监听对象的变化。最后，我们通过修改state.obj.value的值来触发watch回调函数，并且由于我们设置了deep: true，因此即使是对象内部属性的变化也会被监测到。这对于需要监听对象内部属性变化的场景非常有用。

结语

Vue3中的watch属性为我们提供了十分强大并且灵活的监听功能，尤其是在使用immediate和deep属性时。immediate属性可以用于控制是否在初始化时立即执行watch回调函数，可以用于在数据进行首次绑定时执行特定的逻辑，而deep属性用于深度监听对象或数组的变化，包括对象内部属性的变化，非常适用于需要监听复杂数据结构的场景。通过合理运用watch属性及其相关配置，我们可以实现对数据的更加精细的监听和响应，从而使得Vue应用具有更高的灵活性和可扩展性。

Vue 3的数据监视利器：深入解析watch属性的高级用法

前言

watch的基本用法

示例

immediate属性

示例

deep属性

示例

结语