04.1
为什么用框架
手写 DOM 在大应用里难以维护。框架用"状态→视图"的声明式模型，自动高效地更新 DOM，让开发者专注数据与交互。
虚拟 DOM
框架在内存里维护虚拟 DOM，对比差异后只更新变化部分，避免手动操作带来的性能与一致性问题。
04.2
React 组件
React 组件是返回 JSX 的函数。props 是外部输入，state 是内部可变状态。useState 触发重渲染。
function Counter({ initial = 0 }: { initial?: number }) {
const [count, setCount] = useState(initial);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}04.3
React Hooks
Hooks 把状态与副作用带进函数组件：useState、useEffect（副作用）、useMemo（记忆）。依赖数组控制执行时机。
useEffect(() => {
const id = setInterval(() => {}, 1000);
return () => clearInterval(id); // 清理副作用
}, []); // 空依赖：仅挂载时依赖要诚实
useEffect 依赖里用到的变量都要列出，否则会读到过期值。必要时用函数式更新或 ref 规避。
04.4
Vue 组件
Vue 单文件组件（.vue）把模板、逻辑、样式放一起。用 ref/reactive 管理响应式状态。
<template><button @click="count++">{{ count }}</button></template>
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
</script>04.5
Vue 组合式
Composition API 用函数组织逻辑，把相关状态与行为聚合，比 Options API 更利于复用与 TypeScript。
function useCounter() {
const count = ref(0);
const inc = () => count.value++;
return { count, inc };
}组合式函数
把可复用逻辑抽成 useXxx 组合式函数（如 useFetch），跨组件共享，替代 mixins。
04.6
状态与渲染
状态是 UI 的真相来源。列表渲染记得给稳定 key，帮助框架识别节点、复用 DOM。
{items.map(it => (
<li key={it.id}>{it.name}</li> // key 用稳定唯一 id，别用 index
))}04.7
客户端路由
SPA 用 React Router / Vue Router 做无刷新切换页面，路由声明组件与路径映射，支持嵌套与参数。
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/user/:id" element={<User/>} />
</Routes>04.8
常见陷阱与 FAQ
多半是 key 用了数组 index 或不稳定值。改用业务唯一 id，框架才能正确复用与重排。
在 effect 里 setState 且该状态又在依赖里，会反复触发。用函数式更新、移除多余依赖或拆分 effect。
两者能力相当。React 生态更大、Hooks 灵活；Vue 上手平缓、模板直观。依团队与项目选，思想相通。
04.9