Vue3响应式核心之effect怎么使用

Vue3 的响应式系统是其核心特性之一，而 effect 是 Vue3 响应式系统中的关键概念之一。effect 用于追踪依赖关系，并在依赖发生变化时自动执行副作用函数。本文将详细介绍 effect 的使用方法及其在 Vue3 中的应用。

什么是 effect？

在 Vue3 中，effect 是一个函数，它会在其内部的响应式数据发生变化时自动重新执行。effect 的主要作用是追踪响应式数据的依赖关系，并在这些依赖发生变化时触发相应的副作用函数。

effect 的基本用法

1. 创建 effect

在 Vue3 中，effect 是通过 reactive 或 ref 创建的响应式数据的副作用函数。你可以使用 effect 函数来创建一个副作用函数，并将其与响应式数据关联起来。

import { reactive, effect } from 'vue';

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

effect(() => {
  console.log('count changed:', state.count);
});

state.count++; // 输出: count changed: 1

在上面的例子中，effect 函数会立即执行一次，并在 state.count 发生变化时重新执行。

2. 依赖追踪

effect 会自动追踪其内部使用的响应式数据。当这些数据发生变化时，effect 会自动重新执行。

import { reactive, effect } from 'vue';

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

effect(() => {
  state.doubleCount = state.count * 2;
  console.log('doubleCount changed:', state.doubleCount);
});

state.count++; // 输出: doubleCount changed: 2

在这个例子中，effect 函数内部使用了 state.count，因此当 state.count 发生变化时，effect 会重新执行，并更新 state.doubleCount。

3. 停止 effect

在某些情况下，你可能希望停止 effect 的执行。你可以通过 effect 返回的 stop 函数来实现这一点。

import { reactive, effect } from 'vue';

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

const stopEffect = effect(() => {
  console.log('count changed:', state.count);
});

state.count++; // 输出: count changed: 1

stopEffect(); // 停止 effect

state.count++; // 不会输出任何内容

在上面的例子中，调用 stopEffect() 后，effect 将不再响应 state.count 的变化。

effect 的高级用法

1. 调度执行

effect 允许你指定一个调度函数，用于控制副作用函数的执行时机。你可以通过 effect 的第二个参数来指定调度函数。

import { reactive, effect } from 'vue';

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

effect(() => {
  console.log('count changed:', state.count);
}, {
  scheduler: (fn) => {
    setTimeout(fn, 1000); // 延迟 1 秒执行
  }
});

state.count++; // 1 秒后输出: count changed: 1

在这个例子中，effect 的副作用函数会在 state.count 发生变化后 1 秒才执行。

2. 懒执行

默认情况下，effect 会立即执行一次副作用函数。如果你希望 effect 在第一次执行时是懒执行的（即只在依赖发生变化时才执行），你可以通过 lazy 选项来实现。

import { reactive, effect } from 'vue';

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

const lazyEffect = effect(() => {
  console.log('count changed:', state.count);
}, {
  lazy: true
});

state.count++; // 输出: count changed: 1

在这个例子中，effect 不会在创建时立即执行，而是在 state.count 发生变化时才执行。

effect 在 Vue3 中的应用

effect 是 Vue3 响应式系统的核心，它在 Vue3 的许多特性中都有应用，例如：

• 计算属性：Vue3 的计算属性是通过 effect 实现的，它会在依赖的响应式数据发生变化时自动重新计算。
• 侦听器：Vue3 的 watch 和 watchEffect 也是基于 effect 实现的，它们会在依赖的响应式数据发生变化时执行回调函数。
• 组件渲染：Vue3 的组件渲染过程也是通过 effect 实现的，当组件的响应式数据发生变化时，Vue 会自动重新渲染组件。

总结

effect 是 Vue3 响应式系统的核心概念之一，它用于追踪响应式数据的依赖关系，并在依赖发生变化时自动执行副作用函数。通过 effect，Vue3 实现了计算属性、侦听器、组件渲染等特性。掌握 effect 的使用方法，对于理解 Vue3 的响应式系统至关重要。