业务场景

有时候，我们会在非vue文件中声明一些响应式状态，比如在ts文件中声明一些响应式状态，然后在vue文件中使用。这时候，我们需要确保这些响应式状态在组件卸载时能够被正确清理，以避免内存泄漏。

解决方案

我们可以使用effectScope来创建一个作用域，将所有响应式状态都放在这个作用域内。这样，当组件卸载时，我们可以调用作用域的stop方法来清理所有响应式状态。

示例代码

ts文件中:

// formConfig.ts
import { ref, computed, effectScope } from 'vue';

export function useFormConfig(initialType?: string) {
  // 创建一个作用域管理所有响应式状态
  const scope = effectScope(true); // true 表示自动分离
  
  return scope.run(() => {
    const currentType = ref(initialType);
    const formData = ref<Record<string, any>>({});
    
    // 所有计算属性都放在这个作用域内
    const formItems = computed(() => {
      // 计算逻辑...
    });
    
    // 提供清理方法
    const dispose = () => scope.stop();
    
    return {
      currentType,
      formData,
      formItems,
      dispose,
      // 其他需要导出的属性...
    };
  });
}

vue文件中使用

<script setup lang="ts">
import { useFormConfig } from './formConfig';
import { onUnmounted } from 'vue';

// 初始化表单配置
const { currentType, formData, formItems, dispose } = useFormConfig(props.type);

// 组件卸载时清理
onUnmounted(() => {
  dispose();
});

// 其他组件逻辑...
</script>