当前位置：首页 > news >正文

@vue/composition-api

news 来源：原创 2025/5/29 16:26:13

在 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();