vue3 拦截器是怎么拦截的

在 Vue 3 中，拦截器通常是通过使用 `beforeUpdate` 和 `watchEffect` 两个 API 来实现的。

`beforeUpdate` 是一个生命周期钩子函数，它在组件更新之前被调用。你可以在这个钩子函数中执行一些逻辑，例如数据的校验、数据的格式化等。

`watchEffect` 是一个响应式 API，它会在依赖的数据发生变化时被调用。你可以在这个 API 中执行一些副作用操作，例如发起网络请求、更新本地存储等。

通过结合使用这两个 API，你可以实现对数据的拦截操作。具体实现方式可以参考下面的代码示例：

import { reactive, watchEffect } from 'vue';

const data = reactive({ name: '', age: 0 });

watchEffect(() => {
  // 在这里编写拦截器逻辑
  console.log('数据发生了变化', data);
});

data.name = 'Tom';
data.age = 18;

在这个示例中，我们使用了 `reactive` 函数创建了一个响应式对象 `data`，然后使用 `watchEffect` 监听了该对象的变化。在 `watchEffect` 的回调函数中，我们可以编写任何我们想要执行的拦截器逻辑，例如打印变化的数据。当我们修改 `data` 对象的属性时，`watchEffect` 会自动被调用，从而实现了数据的拦截操作。