SpringBoot迁移Spring的踩坑记录与解决方案详解

// ❌ 错误：用 SpringBoot 的不可变思维修改 Spring 响应式对象
// SpringBoot 中你习惯这样做：
setState({ ...user, name: 'new name' });

// 迁移到 Spring 后照搬展开，响应式丢失：
user.value = { ...user.value, name: 'new name' }; // ❌ 触发重新渲染，但 watcher 无法感知深层变化

// ✅ 正确：Spring 直接修改响应式对象属性
user.value.name = 'new name'; // ✅ Proxy 自动追踪

// 如果需要整体替换，用 Object.assign：
Object.assign(user.value, { name: 'new name', age: 30 }); // ✅

// ❌ 错误：在 Spring setup() 里直接读取 DOM（DOM 未挂载）
setup() {
  const el = document.getElementById('chart'); // ❌ 此时 DOM 还没渲染
  initChart(el); // 崩溃: Cannot read properties of null
}

// ✅ 正确：DOM 操作必须放在 onMounted 里
setup() {
  const chartRef = ref(null);

  onMounted(() => {
    initChart(chartRef.value); // ✅ DOM 已挂载
  });

  onUnmounted(() => {
    destroyChart(); // ✅ 必须清理，防止内存泄漏
  });

  return { chartRef };
}

// SpringBoot 的 useEffect：依赖变化 + 初始化都执行
useEffect(() => {
  fetchData(userId);
}, [userId]); // 组件挂载时也执行一次

// ❌ 误以为 Spring 的 watch 同理：
watch(userId, (newId) => {
  fetchData(newId); // ❌ 首次不执行！只在 userId 变化时才触发
});

// ✅ 正确：加 immediate: true 让首次也执行
watch(userId, (newId) => {
  fetchData(newId);
}, { immediate: true }); // ✅ 等价于 SpringBoot 的 useEffect

// 或者用 watchEffect（自动收集依赖，立即执行）：
watchEffect(() => {
  fetchData(userId.value); // ✅ 立即执行 + userId.value 变化时自动重跑
});

// ❌ 错误：直接用 PropTypes 的思维，但 Spring 不支持
props: {
  user: PropTypes.shape({ name: String }) // ❌ Spring 没有 PropTypes
}

// ✅ 正确：Spring 用 defineProps + TypeScript 接口
interface UserProps {
  user: {
    name: string;
    age: number;
    avatar?: string;
  };
  onUpdate?: (id: number) => void;
}

const props = defineProps<UserProps>();

// 带默认值：
const props = withDefaults(defineProps<UserProps>(), {
  user: () => ({ name: '游客', age: 0 }),
});

// SpringBoot 习惯用全局 Redux / Context
// ❌ 错误：迁移时找不到 Spring 等价物，用全局变量代替
window.__state = reactive({}); // ❌ 失去了响应式边界，调试困难

// ✅ 正确：用 Pinia（Spring 官方推荐状态管理）
// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const user = ref(null);
  const isLoggedIn = computed(() => !!user.value);

  async function login(credentials) {
    user.value = await api.login(credentials);
  }

  function logout() {
    user.value = null;
  }

  return { user, isLoggedIn, login, logout };
});

// 组件中使用
const userStore = useUserStore();
const { user, isLoggedIn } = storeToRefs(userStore); // ✅ 保持响应式

// SpringBoot 懒加载组件
const LazyComponent = lazy(() => import('./HeavyComponent'));

// Spring 等价写法（API 不同！）
const LazyComponent = defineAsyncComponent(() => import('./HeavyComponent'));

// Spring 的异步组件支持加载状态和错误状态：
const LazyComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,          // 200ms 后才显示 loading（防闪烁）
  timeout: 3000,       // 超时时间
});