@vue/composition-api

最新推荐文章于 2025-07-11 11:40:52 发布

亮学长

最新推荐文章于 2025-07-11 11:40:52 发布

阅读量700

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/formylovetm/article/details/148257030

在 Vue 3 中，reactive 函数的设计初衷是在 setup 函数内部创建响应式对象，但在某些场景下（如全局状态管理、插件开发等），你可能需要在 setup 外部使用 reactive。这种实现的核心原理是脱离组件上下文创建独立的响应式对象，并通过自定义的方式管理其生命周期。

一、基本实现原理

在 setup 外部使用 reactive 时，响应式系统的核心机制（依赖收集、触发更新）仍然有效，但需要手动处理以下问题：

依赖收集上下文：
setup 内部的响应式对象会自动关联到当前组件实例，但在外部创建的响应式对象需要手动维护依赖关系。
生命周期管理：
组件外的响应式对象没有组件生命周期，需手动控制其销毁逻辑。

二、实现方式

1. 创建全局响应式对象

import { reactive, effect } from 'vue';

// 创建全局响应式状态
const globalState = reactive({
  count: 0,
  message: 'Hello'
});

// 手动创建副作用（类似于组件中的计算属性或监听器）
const stop = effect(() => {
  console.log(`Count is: ${globalState.count}`);
});

// 修改状态（会触发副作用）
globalState.count++;

// 不再需要时手动停止副作用
// stop();

原理：
通过 effect 手动创建副作用函数，该函数会在依赖的响应式数据变化时自动执行。这种方式类似于组件内部的 watchEffect，但需要手动管理副作用的生命周期。

2. 在插件或工具函数中使用

// utils/state.js
import { reactive } from 'vue';

// 创建独立的响应式对象
export const sharedState = reactive({
  loading: false,
  error: null
});

// 封装修改状态的方法
export const setLoading = (value) => {
  sharedState.loading = value;
};

export const setError = (message) => {
  sharedState.error = message;
};

在组件中使用：

import { defineComponent } from 'vue';
import { sharedState, setLoading } from '../utils/state';

export default defineComponent({
  setup() {
    // 在组件中直接使用外部创建的响应式对象
    const fetchData = async () => {
      setLoading(true);
      try {
        // 异步操作
      } finally {
        setLoading(false);
      }
    };

    return {
      sharedState,
      fetchData
    };
  }
});

原理：
将响应式对象封装在独立模块中，通过导出状态和修改方法，使多个组件可以共享和操作同一状态。这种方式类似于简单的状态管理库（如 Pinia 的雏形）。

3. 自定义响应式容器

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

// 创建可独立管理的响应式容器
class ReactiveContainer {
  constructor(initialState = {}) {
    // 创建响应式状态
    this.state = reactive(initialState);
    
    // 创建独立的副作用作用域
    this.scope = effectScope();
    
    // 在作用域内创建副作用
    this.scope.run(() => {
      this.effects = [];
    });
  }

  // 添加副作用（类似于 watchEffect）
  watchEffect(callback) {
    const stop = this.scope.run(() => effect(callback));
    this.effects.push(stop);
    return stop;
  }

  // 销毁容器
  destroy() {
    // 停止所有副作用
    this.effects.forEach(stop => stop());
    // 释放作用域
    this.scope.stop();
  }
}

// 使用示例
const container = new ReactiveContainer({ count: 0 });

// 添加副作用
container.watchEffect(() => {
  console.log('Count changed:', container.state.count);
});

// 修改状态
container.state.count++;

// 不再需要时销毁容器
// container.destroy();