React vs Vue 心智模型对比

setKeyword(event.target.value);

<input v-model="keyword" />

React 麻烦，Vue 简单。

为什么 React 要 setState？
为什么 Vue 改 keyword 就能自动更新？
为什么 React 要写依赖数组？
为什么 Vue 的 computed 能自动知道依赖？
为什么 React 状态要当快照看？
为什么 Vue reactive 解构后可能丢响应式？

状态变了 -> 重新执行组件函数 -> 得到新的 UI 描述 -> React 对比差异 -> 更新 DOM

模板读取响应式数据 -> Vue 记录依赖 -> 数据变了 -> 通知依赖它的地方 -> 更新 DOM

搜索用户
渲染用户列表
打开编辑弹窗
保存表单
刷新列表
根据权限显示按钮

这个页面有哪些 state？
每个 state 变化后，UI 应该重新算成什么样？
哪些逻辑要放进 Hook？
哪些 props 要传给子组件？

模板需要绑定哪些数据？
哪些数据用 ref，哪些数据用 reactive？
哪些逻辑抽成 composable？
哪些变化要 watch？

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

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

const keyword = ref('');

<input v-model="keyword" />

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

  return <UserTable keyword={keyword} />;
}

执行函数 -> 拿到 JSX -> 生成 UI 描述 -> 提交到真实 DOM

setKeyword('小明');

1. keyword 的下一次状态变成 "小明"
2. React 重新执行 UserManagementPage()
3. 得到新的 JSX 结果
4. React 比较新旧 UI 描述
5. 只把必要变化提交到 DOM

把第 3 行改成小明
把按钮变蓝
把弹窗打开

当 keyword 是小明时，页面应该长这样。
当 open 是 true 时，弹窗应该显示。
当 permissions 包含 user:create 时，新增按钮应该出现。

Render 阶段：重新计算新的 UI 描述
Commit 阶段：把变化提交到真实 DOM

const keyword = ref('');
const users = ref<User[]>([]);

<input v-model="keyword" />
<UserTable :users="users" />

这个模板依赖 keyword。
这个表格依赖 users。

keyword.value = '小明';

keyword 变了，通知依赖 keyword 的地方更新。

读取 keyword -> track(keyword)
修改 keyword -> trigger(keyword)

const keyword = ref('');
keyword.value = '小明';

const query = reactive({
  keyword: '',
  status: 'all'
});

query.keyword = '小明';

1. 模板渲染时读取响应式数据
2. Vue 记录依赖关系
3. 响应式数据变化
4. Vue 触发相关 effect
5. 调度更新
6. patch DOM

1. 用户输入
2. onChange 触发
3. setKeyword('小明')
4. React 安排状态更新
5. 组件函数重新执行
6. keyword 这次变成 "小明"
7. 根据新 keyword 计算 filteredUsers
8. React 对比新旧 UI
9. DOM 更新

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

const filteredUsers = users.filter((user) => user.name.includes(keyword));

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

1. 用户输入
2. v-model 更新 keyword
3. keyword.value 变化
4. Vue trigger keyword 的依赖
5. computed 重新计算 filteredUsers
6. 模板相关部分更新
7. DOM patch

const keyword = ref('');
const filteredUsers = computed(() => users.value.filter((user) => user.name.includes(keyword.value)));

<input v-model="keyword" />

[
  { id: 1, name: '小明' },
  { id: 2, name: '小红' }
]

setUsers(nextUsers);

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

哪个用户是原来就有的？
哪个用户是新增的？
哪个用户被删除了？
哪个用户内容变了？

users.value = nextUsers;

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

<UserRow key={user.id} user={user} />

<UserRow :key="user.id" :user="user" />

// 不推荐
query.keyword = '小明';
setQuery(query);

setQuery((current) => ({
  ...current,
  keyword: '小明'
}));

旧对象还是那个对象，React 很难知道里面是不是被偷偷改了。
给一个新对象，React 一看引用变了，就知道要更新。

setUsers((current) => current.map((user) => (user.id === id ? { ...user, status: 'disabled' } : user)));

query.keyword = '小明';

你改了 query.keyword。
我知道。
我通知依赖 query.keyword 的地方。

const { keyword } = query;

const { keyword } = toRefs(query);

Vue 允许你像改普通对象一样写代码，但前提是你别把响应式对象拆坏。

<UserRow user={user} />

{users.length > 0 ? <UserTable users={users} /> : <Empty />}

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

function useUsers() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);

  return { users, loading };
}

if (enabled) {
  const [users, setUsers] = useState([]);
}

React 每次执行组件函数，都要按同样顺序拿状态。
顺序乱了，就不知道哪个状态对应哪个 useState。

export function useUsers() {
  const users = ref<User[]>([]);
  const loading = ref(false);

  return { users, loading };
}

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

这次渲染完成后，如果 query 变了，就执行这个副作用。

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

观察 query 相关数据，变了就执行 loadUsers。

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

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

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

activeUsers 依赖 users.value。
users 变了，activeUsers 才重新算。

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

这个计算依赖 users。
users 变了才重新算。

<UserRow user={user} />

<UserRow :user="user" />

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

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

Context：少量全局数据
Zustand：中小项目业务状态
Redux Toolkit：大型团队强规范

Pinia：Vue 官方推荐状态管理

const canCreate = useAuthStore((state) => state.permissions.includes('user:create'));

const authStore = useAuthStore();
const canCreate = computed(() => authStore.permissions.includes('user:create'));

不是所有 state 都要全局。
搜索框输入、编辑表单草稿，通常留在页面或组件本地。
当前用户、权限、主题、菜单，才更适合全局。

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

function UserTable({ users, onEdit }: UserTableProps) {
  return <table>{/* ... */}</table>;
}

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

const emit = defineEmits<{
  edit: [user: User];
}>();

组件重新执行
props 引用变化
昂贵计算重复执行
子组件没必要重渲染

useMemo
useCallback
memo
列表虚拟滚动
路由懒加载

响应式对象太大
watch 太深
列表太大
组件拆分不合理
不必要的全局状态依赖

computed
shallowRef
markRaw
分页/虚拟滚动
路由懒加载

先把数据流写清楚，再优化。
不要为了看起来专业，提前堆 useMemo、watch、缓存。

JSX
不可变更新
state snapshot
useEffect 依赖数组
Hook 调用规则
props callback

template 指令
ref/reactive
computed/watch
script setup
defineProps/defineEmits
Pinia
响应式解构边界

同一个搜索框
同一个列表
同一个编辑弹窗
同一个权限按钮
同一个接口请求
同一个状态管理

文本怎么写
class 怎么绑
事件怎么绑
表单怎么处理
props/emit 怎么对应
请求怎么组织
路由权限怎么落地
工程目录怎么设计