// React 組件：狀態(tài)驅(qū)動(dòng)
import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(data => {
      setUser(data);       // 觸發(fā)重新渲染
      setLoading(false);
    });
  }, [userId]);

  // React 的思維：數(shù)據(jù)變 -> 重新渲染 -> 對(duì)比虛擬 DOM -> 最小化更新
  return loading ? <Spinner /> : <div>{user.name}</div>;
}

// Vue3 組件：聲明式模板 + 響應(yīng)式數(shù)據(jù)
import { ref, computed, onMounted } from 'vue';
defineComponent({
  setup() {
    // ref 包裝響應(yīng)式數(shù)據(jù)
    const user = ref(null);
    const loading = ref(true);
    const userId = ref(1);
    // 計(jì)算屬性
    const displayName = computed(() => user.value?.name ?? '加載中');
    onMounted(async () => {
      const data = await fetchUser(userId.value);
      user.value = data;   // 直接賦值，Vue3 自動(dòng)追蹤
      loading.value = false;
    });
    return { user, loading, displayName };
  }
});

<!-- Vue3 模板：直接使用響應(yīng)式數(shù)據(jù) -->
<template>
  <div>{{ loading ? '加載中' : displayName }}</div>
</template>

// React Props 定義
interface UserCardProps {
  name: string;
  age: number;
  avatar?: string;
  onUpdate: (id: number, name: string) => void;
}

function UserCard({ name, age, avatar, onUpdate }: UserCardProps) {
  return <div onClick={() => onUpdate(1, name)}>{name}, {age}</div>;
}

// Vue3 Props 定義（defineProps 配合 TS）
interface UserCardProps {
  name: string;
  age: number;
  avatar?: string;
  emit: (event: 'update', id: number, name: string) => void;
}

const props = defineProps<UserCardProps>();
const emit = defineEmits<{
  update: [id: number, name: string];
}>();

// Vue3 使用 emit
const handleClick = () => emit('update', 1, props.name);

// React useEffect 替代所有生命周期
useEffect(() => {
  // mounted
  console.log('組件掛載');

  return () => {
    // unmounted cleanup
    console.log('組件卸載清理');
  };
}, []); // 空依賴 = didMount + willUnmount

useEffect(() => {
  // didUpdate — 當(dāng) userId 變化時(shí)執(zhí)行
  fetchUser(userId);
}, [userId]);

// Vue3 組合式 API 生命周期鉤子
import { onMounted, onUnmounted, watch } from 'vue';

onMounted(() => {
  console.log('setup 執(zhí)行 = React 的 constructor');
});

watch(userId, (newId) => {
  fetchUser(newId); // 等價(jià)于 React 的 useEffect(() => {...}, [userId])
});

onUnmounted(() => {
  console.log('組件卸載 = React 的 componentWillUnmount');
});

// React
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: '', age: 0 });
setCount(count + 1);
setUser({ ...user, name: 'new name' });

// Vue3
const count = ref(0);           // 基礎(chǔ)類型用 ref
const user = reactive({ name: '', age: 0 }); // 對(duì)象/數(shù)組用 reactive
count.value++;                 // ref 要 .value
user.name = 'new name';         // reactive 直接改

// React：副作用在 useEffect 里
useEffect(() => {
  document.title = `${user.name} 的主頁`;
}, [user.name]);

// Vue3：watch 精確監(jiān)聽
watch(() => user.name, (newName) => {
  document.title = `${newName} 的主頁`;
});

// watchEffect 自動(dòng)收集依賴（類似 useEffect，但更直接）
watchEffect(() => {
  document.title = `${user.name} 的主頁`;
});

// React
const sortedList = useMemo(() =>
  list.filter(x => x.active).sort((a, b) => a.name.localeCompare(b.name)),
  [list]
);
const handleSubmit = useCallback((data) => submit(data), [submit]);

// Vue3
const sortedList = computed(() =>
  list.filter(x => x.active).sort((a, b) => a.name.localeCompare(b.name))
);
const handleSubmit = (data: FormData) => submit(data); // Vue3 不需要 useCallback

// React 自定義 Hook
function useUserSearch(keyword) {
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    search(keyword).then(data => {
      setResults(data);
      setLoading(false);
    });
  }, [keyword]);

  return { results, loading };
}

// Vue3 Composables（自定義組合式函數(shù)）
function useUserSearch(keyword: Ref<string>) {
  const results = ref([]);
  const loading = ref(false);

  watch(keyword, async (kw) => {
    if (!kw) { results.value = []; return; }
    loading.value = true;
    results.value = await search(kw);
    loading.value = false;
  }, { immediate: true });

  return { results: readonly(results), loading: readonly(loading) };
}

// 錯(cuò)誤 ? — 展開后變成普通對(duì)象，失去響應(yīng)式
user.value = { ...user.value, name: 'new name' };

// 正確 ? — 直接修改屬性
user.value.name = 'new name';

// 或者用 Object.assign（對(duì) ref）
Object.assign(user.value, { name: 'new name' });

// React Redux 風(fēng)格
const userSlice = createSlice({
  name: 'user',
  initialState: { name: '', token: '' },
  reducers: {
    setUser: (state, action) => { state.name = action.payload.name; }
  }
});

// Vue3 Pinia — 更直觀，不需要 action/reducer 分離
export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  actions: {
    setUser(data) {
      this.name = data.name;
      this.token = data.token;
    },
    async fetchUser(id) {
      const data = await api.getUser(id);
      this.setUser(data);
    }
  }
});