// ? 錯(cuò)誤：用 SpringBoot 的不可變思維修改 Spring 響應(yīng)式對(duì)象
// SpringBoot 中你習(xí)慣這樣做：
setState({ ...user, name: 'new name' });

// 遷移到 Spring 后照搬展開，響應(yīng)式丟失：
user.value = { ...user.value, name: 'new name' }; // ? 觸發(fā)重新渲染，但 watcher 無法感知深層變化

// ? 正確：Spring 直接修改響應(yīng)式對(duì)象屬性
user.value.name = 'new name'; // ? Proxy 自動(dòng)追蹤

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

// ? 錯(cuò)誤：在 Spring setup() 里直接讀取 DOM（DOM 未掛載）
setup() {
  const el = document.getElementById('chart'); // ? 此時(shí) DOM 還沒渲染
  initChart(el); // 崩潰: Cannot read properties of null
}

// ? 正確：DOM 操作必須放在 onMounted 里
setup() {
  const chartRef = ref(null);

  onMounted(() => {
    initChart(chartRef.value); // ? DOM 已掛載
  });

  onUnmounted(() => {
    destroyChart(); // ? 必須清理，防止內(nèi)存泄漏
  });

  return { chartRef };
}

// SpringBoot 的 useEffect：依賴變化 + 初始化都執(zhí)行
useEffect(() => {
  fetchData(userId);
}, [userId]); // 組件掛載時(shí)也執(zhí)行一次

// ? 誤以為 Spring 的 watch 同理：
watch(userId, (newId) => {
  fetchData(newId); // ? 首次不執(zhí)行！只在 userId 變化時(shí)才觸發(fā)
});

// ? 正確：加 immediate: true 讓首次也執(zhí)行
watch(userId, (newId) => {
  fetchData(newId);
}, { immediate: true }); // ? 等價(jià)于 SpringBoot 的 useEffect

// 或者用 watchEffect（自動(dòng)收集依賴，立即執(zhí)行）：
watchEffect(() => {
  fetchData(userId.value); // ? 立即執(zhí)行 + userId.value 變化時(shí)自動(dòng)重跑
});

// ? 錯(cuò)誤：直接用 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>();

// 帶默認(rèn)值：
const props = withDefaults(defineProps<UserProps>(), {
  user: () => ({ name: '游客', age: 0 }),
});

// SpringBoot 習(xí)慣用全局 Redux / Context
// ? 錯(cuò)誤：遷移時(shí)找不到 Spring 等價(jià)物，用全局變量代替
window.__state = reactive({}); // ? 失去了響應(yīng)式邊界，調(diào)試?yán)щy

// ? 正確：用 Pinia（Spring 官方推薦狀態(tài)管理）
// 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); // ? 保持響應(yīng)式

// SpringBoot 懶加載組件
const LazyComponent = lazy(() => import('./HeavyComponent'));

// Spring 等價(jià)寫法（API 不同?。?
const LazyComponent = defineAsyncComponent(() => import('./HeavyComponent'));

// Spring 的異步組件支持加載狀態(tài)和錯(cuò)誤狀態(tài)：
const LazyComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,          // 200ms 后才顯示 loading（防閃爍）
  timeout: 3000,       // 超時(shí)時(shí)間
});