React vs Vue 真实开发任务对比

用户列表
搜索筛选
新增/编辑弹窗
删除确认
表单校验
API 请求
Loading / Error 状态
路由跳转
全局状态
权限控制
工程化目录组织

代码是否清楚
状态是否好追踪
业务是否好拆分
多人协作是否稳定
TypeScript 是否能帮忙
后续扩展是否方便

export function UserManagementPage() {
  return <section>用户管理</section>;
}

<script setup lang="ts">
const title = '用户管理';
</script>

<template>
  <section>{{ title }}</section>
</template>

const title = '用户管理';

return <h1>{title}</h1>;

<h1>{{ title }}</h1>

React：语法更接近 JS 表达式。
Vue：语法更接近 HTML + 指令。

<span>{user.name}</span>

<span>{{ user.name }}</span>

<input value={keyword} placeholder="搜索用户名" />

<input :value="keyword" placeholder="搜索用户名" />

<span className={user.status === 'active' ? 'badge active' : 'badge disabled'}>
  {user.status}
</span>

<span :class="['badge', user.status === 'active' ? 'active' : 'disabled']">
  {{ user.status }}
</span>

<div style={{ color: user.status === 'active' ? '#16a34a' : '#64748b' }} />

<div :style="{ color: user.status === 'active' ? '#16a34a' : '#64748b' }" />

return users.length > 0 ? <UserTable users={users} /> : <p>暂无用户</p>;

{error && <p className="error">{error}</p>}

<UserTable v-if="users.length > 0" :users="users" />
<p v-else>暂无用户</p>

<p v-if="error" class="error">{{ error }}</p>

<tbody>
  {users.map((user) => (
    <UserRow key={user.id} user={user} />
  ))}
</tbody>

<tbody>
  <UserRow v-for="user in users" :key="user.id" :user="user" />
</tbody>

<button onClick={() => openEditModal(user)}>编辑</button>

<button @click="openEditModal(user)">编辑</button>

function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  setKeyword(event.target.value);
}

<input @input="handleInput" />

function handleInput(event: Event) {
  keyword.value = (event.target as HTMLInputElement).value;
}

<form @submit.prevent="submitForm">
  <button type="submit">保存</button>
</form>

function submitForm(event: React.FormEvent) {
  event.preventDefault();
}

const [keyword, setKeyword] = useState('');

<input value={keyword} onChange={(event) => setKeyword(event.target.value)} />;

<script setup lang="ts">
const keyword = ref('');
</script>

<template>
  <input v-model="keyword" />
</template>

const [form, setForm] = useState<UserForm>({
  name: '',
  email: '',
  role: 'member'
});

<input
  value={form.name}
  onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))}
/>;

const form = reactive<UserForm>({
  name: '',
  email: '',
  role: 'member'
});

<input v-model="form.name" />

type UserRowProps = {
  user: User;
};

function UserRow({ user }: UserRowProps) {
  return <span>{user.name}</span>;
}

<script setup lang="ts">
defineProps<{
  user: User;
}>();
</script>

<template>
  <span>{{ user.name }}</span>
</template>

<UserRow user={user} />

<UserRow :user="user" />

type UserRowProps = {
  user: User;
  onEdit: (user: User) => void;
};

function UserRow({ user, onEdit }: UserRowProps) {
  return <button onClick={() => onEdit(user)}>编辑</button>;
}

<script setup lang="ts">
const props = defineProps<{ user: User }>();
const emit = defineEmits<{
  edit: [user: User];
}>();
</script>

<template>
  <button @click="emit('edit', props.user)">编辑</button>
</template>

<UserRow user={user} onEdit={openEditModal} />

<UserRow :user="user" @edit="openEditModal" />

type ModalProps = {
  title: string;
  children: React.ReactNode;
};

function Modal({ title, children }: ModalProps) {
  return (
    <section className="modal">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

<Modal title="编辑用户">
  <UserForm />
</Modal>

<template>
  <section class="modal">
    <h2>{{ title }}</h2>
    <slot />
  </section>
</template>

<Modal title="编辑用户">
  <UserForm />
</Modal>

<slot name="footer" />

<Modal title="编辑用户" footer={<button>保存</button>}>
  <UserForm />
</Modal>

const [open, setOpen] = useState(false);
const [editingUser, setEditingUser] = useState<User | null>(null);

const open = ref(false);
const editingUser = ref<User | null>(null);

setQuery((current) => ({
  ...current,
  keyword: nextKeyword
}));

query.keyword = nextKeyword;

React：给 React 一份新状态。
Vue：修改响应式数据，Vue 自动追踪。

const activeCount = useMemo(
  () => users.filter((user) => user.status === 'active').length,
  [users]
);

const activeCount = computed(() => users.value.filter((user) => user.status === 'active').length);

useEffect(() => {
  loadUsers();
}, []);

onMounted(() => {
  loadUsers();
});

useEffect(() => {
  loadUsers(query);
}, [query]);

watch(
  () => ({ ...query }),
  () => {
    loadUsers();
  }
);

const inputRef = useRef<HTMLInputElement | null>(null);

useEffect(() => {
  inputRef.current?.focus();
}, []);

return <input ref={inputRef} />;

<script setup lang="ts">
const inputRef = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputRef.value?.focus();
});
</script>

<template>
  <input ref="inputRef" />
</template>

const [state, setState] = useState({
  data: [] as User[],
  loading: false,
  error: null as string | null
});

async function loadUsers() {
  setState((current) => ({ ...current, loading: true, error: null }));

  try {
    const data = await fetchUsers(query);
    setState({ data, loading: false, error: null });
  } catch {
    setState({ data: [], loading: false, error: '加载失败' });
  }
}

const users = ref<User[]>([]);
const loading = ref(false);
const error = ref<string | null>(null);

async function loadUsers() {
  loading.value = true;
  error.value = null;

  try {
    users.value = await fetchUsers(query);
  } catch {
    error.value = '加载失败';
  } finally {
    loading.value = false;
  }
}

不要只写成功状态。
真实页面至少要有 loading、error、empty、success。

export function useUsers() {
  const [query, setQuery] = useState<UserQuery>({ keyword: '', status: 'all' });
  const [state, setState] = useState<UserState>({ data: [], loading: false, error: null });

  const reload = useCallback(() => {
    return loadUsers(query);
  }, [query]);

  return { query, setQuery, state, reload };
}

export function useUsers() {
  const query = reactive<UserQuery>({ keyword: '', status: 'all' });
  const users = ref<User[]>([]);
  const loading = ref(false);
  const error = ref<string | null>(null);

  async function reload() {
    users.value = await fetchUsers(query);
  }

  return { query, users, loading, error, reload };
}

const AuthContext = createContext<AuthState | null>(null);

export function useAuth() {
  const value = useContext(AuthContext);
  if (!value) throw new Error('AuthProvider missing');
  return value;
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  permissions: [],
  setUser: (user) => set({ user, permissions: user.permissions })
}));

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null as CurrentUser | null,
    permissions: [] as string[]
  }),
  actions: {
    setUser(user: CurrentUser) {
      this.user = user;
      this.permissions = user.permissions;
    }
  }
});

{
  path: '/admin/users',
  element: <UserManagementPage />
}

const navigate = useNavigate();
navigate('/admin/users');

const { id } = useParams();

{
  path: '/admin/users',
  component: () => import('./UserManagementPage.vue')
}

const router = useRouter();
router.push('/admin/users');

const route = useRoute();
const id = route.params.id;

function PermissionButton({ code, children }: { code: PermissionCode; children: React.ReactNode }) {
  const can = useAuthStore((state) => state.permissions.includes(code));
  return can ? <>{children}</> : null;
}

<button v-if="authStore.permissions.includes('user:create')">
  新增用户
</button>

<RequirePermission code="user:read">
  <UserManagementPage />
</RequirePermission>

{
  path: '/admin/users',
  component: UserManagementPage,
  meta: { permission: 'user:read' }
}

router.beforeEach((to) => {
  const authStore = useAuthStore();
  const permission = to.meta.permission as PermissionCode | undefined;

  if (permission && !authStore.permissions.includes(permission)) {
    return '/403';
  }
});

type UserStatus = 'active' | 'disabled';

type User = {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'member';
  status: UserStatus;
};

type UserTableProps = {
  users: User[];
  onEdit: (user: User) => void;
};

defineProps<{
  users: User[];
}>();

defineEmits<{
  edit: [user: User];
  delete: [id: number];
}>();

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
}

function handleInput(event: Event) {
  const value = (event.target as HTMLInputElement).value;
}

import styles from './user-table.module.css';

<table className={styles.table} />

<style scoped>
.table {
  width: 100%;
}
</style>

const filteredUsers = useMemo(() => filterUsers(users, query), [users, query]);
const handleEdit = useCallback((user: User) => openEditModal(user), []);
export const UserRow = memo(function UserRow({ user }: UserRowProps) {
  return <tr>{user.name}</tr>;
});

const filteredUsers = computed(() => filterUsers(users.value, query));

<UserRow v-for="user in filteredUsers" :key="user.id" :user="user" />

render(<UserTable users={users} onEdit={vi.fn()} />);
expect(screen.getByText('小明')).toBeInTheDocument();

const wrapper = mount(UserTable, {
  props: { users }
});

expect(wrapper.text()).toContain('小明');

await page.goto('/admin/users');
await page.getByPlaceholder('搜索用户名').fill('小明');
await expect(page.getByText('小明')).toBeVisible();

features/users/
  api.ts
  types.ts
  hooks/
    use-users.ts
  components/
    user-filter.tsx
    user-form.tsx
    user-table.tsx
  pages/
    user-management-page.tsx

features/users/
  api.ts
  types.ts
  composables/
    use-users.ts
  components/
    UserFilter.vue
    UserForm.vue
    UserTable.vue
  pages/
    UserManagementPage.vue

按业务模块聚合
接口层独立
类型独立
页面只负责组装
复杂逻辑抽到 hook/composable
权限和路由集中处理

先精通一个，再能看懂另一个。
用同一个用户管理后台案例练两遍，比看十篇争论文章有用。

React 生态怎么选？
Vue 生态怎么选？
两边路由、状态、请求、表单、组件库、SSR、测试怎么横向比较？

同一个业务问题，我能用清楚的数据流、组件结构和工程规范解决。