月度归档： 2025 年 4 月

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>