Vue3怎么获取观察者？具体方法与示例

本文链接：https://blog.youkuaiyun.com/qq_41504401/article/details/145623648

在 Vue 3 中，响应式系统的观察者（Watcher）机制被重构为基于 effect 和 ReactiveEffect 的实现。以下是获取和管理观察者的几种方法：

1. 使用 `watch` 和 `watchEffect` 创建观察者

Vue 3 提供了 watch 和 watchEffect 函数来显式创建观察者，并返回一个停止句柄，用于手动停止监听。

示例代码：

import { watch, watchEffect } from 'vue';

// 使用 watchEffect
const stopEffect = watchEffect(() => {
  // 副作用代码（自动追踪依赖）
  console.log('数据变化时执行');
});

// 使用 watch
const stopWatch = watch(
  () => someReactiveValue, // 监听的数据源
  (newVal, oldVal) => {
    // 数据变化时的回调
    console.log('数据变化了', newVal);
  }
);

// 停止观察者
stopEffect();
stopWatch();

2. 通过 `effectScope` 管理多个观察者

Vue 3.2+ 引入了 effectScope，允许你批量管理多个 effect（观察者），例如在组件卸载时统一清理。

示例代码：

import { effectScope, reactive, watchEffect } from 'vue';

const scope = effectScope();

scope.run(() => {
  const state = reactive({ count: 0 });

  // 在作用域内创建观察者
  watchEffect(() => {
    console.log('count:', state.count);
  });

  // 其他 effect...
});

// 停止作用域内的所有观察者
scope.stop();

3. 直接创建 ReactiveEffect（高级用法）

通过 ReactiveEffect 类可以直接创建底层观察者，但需谨慎使用（通常不推荐直接操作）。

示例代码：

import { ReactiveEffect } from 'vue';

const data = { value: 0 };
const effect = new ReactiveEffect(() => {
  console.log('数据变化:', data.value);
});

// 手动触发依赖收集（首次执行）
effect.run();

// 修改数据后触发回调
data.value = 1; // 输出 "数据变化: 1"

// 停止观察者
effect.stop();