React转Vue3的避坑指南

// React 组件：状态驱动
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);       // 触发重新渲染
      setLoading(false);
    });
  }, [userId]);

  // React 的思维：数据变 -> 重新渲染 -> 对比虚拟 DOM -> 最小化更新
  return loading ? <Spinner /> : <div>{user.name}</div>;
}

// Vue3 组件：声明式模板 + 响应式数据
import { ref, computed, onMounted } from 'vue';
defineComponent({
  setup() {
    // ref 包装响应式数据
    const user = ref(null);
    const loading = ref(true);
    const userId = ref(1);
    // 计算属性
    const displayName = computed(() => user.value?.name ?? '加载中');
    onMounted(async () => {
      const data = await fetchUser(userId.value);
      user.value = data;   // 直接赋值，Vue3 自动追踪
      loading.value = false;
    });
    return { user, loading, displayName };
  }
});

<!-- Vue3 模板：直接使用响应式数据 -->
<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 — 当 userId 变化时执行
  fetchUser(userId);
}, [userId]);

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

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

watch(userId, (newId) => {
  fetchUser(newId); // 等价于 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);           // 基础类型用 ref
const user = reactive({ name: '', age: 0 }); // 对象/数组用 reactive
count.value++;                 // ref 要 .value
user.name = 'new name';         // reactive 直接改

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

// Vue3：watch 精确监听
watch(() => user.name, (newName) => {
  document.title = `${newName} 的主页`;
});

// watchEffect 自动收集依赖（类似 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（自定义组合式函数）
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) };
}

// 错误 ❌ — 展开后变成普通对象，失去响应式
user.value = { ...user.value, name: 'new name' };

// 正确 ✅ — 直接修改属性
user.value.name = 'new name';

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

// React Redux 风格
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);
    }
  }
});