+```
+
+---
+
+### 9. 列表渲染
+
+#### React
+```tsx
+{items.map(item => (
+
+))}
+```
+
+#### Vue
+```vue
+
+```
+
+---
+
+### 10. 组件通信
+
+#### React Props
+```tsx
+
+```
+
+#### Vue Props & Emits
+```vue
+
+```
+
+---
+
+### 11. Context API
+
+#### React Context
+```typescript
+const Context = createContext();
+const value = useContext(Context);
+```
+
+#### Vue provide/inject
+```typescript
+// 提供
+provide(key, value);
+
+// 注入
+const value = inject(key);
+```
+
+#### Pinia Store (推荐)
+```typescript
+// store
+export const useStore = defineStore('store', () => {
+ const state = ref(0);
+ return { state };
+});
+
+// 使用
+const store = useStore();
+store.state;
+```
+
+---
+
+### 12. 生命周期
+
+#### React
+```typescript
+useEffect(() => {
+ // componentDidMount
+ return () => {
+ // componentWillUnmount
+ };
+}, []);
+
+useEffect(() => {
+ // componentDidUpdate
+}, [dependency]);
+```
+
+#### Vue
+```typescript
+onMounted(() => {
+ // 组件挂载后
+});
+
+onUnmounted(() => {
+ // 组件卸载前
+});
+
+onUpdated(() => {
+ // 组件更新后
+});
+```
+
+---
+
+### 13. 表单处理
+
+#### React
+```tsx
+const [form, setForm] = useState({ name: '', email: '' });
+
+
setForm({ ...form, name: e.target.value })}
+/>
+```
+
+#### Vue
+```vue
+
+
+
+
+
+```
+
+---
+
+### 14. 条件类名
+
+#### React
+```tsx
+
+```
+
+#### Vue
+```vue
+
+```
+
+---
+
+### 15. 动态属性
+
+#### React
+```tsx
+
+
+```
+
+#### Vue
+```vue
+
+
![]()
+```
+
+---
+
+### 16. 插槽 (Slots)
+
+#### React
+```tsx
+function Layout({ children }) {
+ return
{children}
;
+}
+```
+
+#### Vue
+```vue
+
+
+
+
+
+```
+
+#### 具名插槽
+```vue
+
+
+ Header
+ Content
+ Footer
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+### 17. 图标使用
+
+#### React (lucide-react)
+```tsx
+import { FileJson, Terminal } from 'lucide-react';
+
+
+
+```
+
+#### Vue (lucide-vue-next)
+```vue
+
+
+
+
+
+
+```
+
+---
+
+### 18. 异步数据获取
+
+#### React
+```typescript
+const [data, setData] = useState(null);
+const [loading, setLoading] = useState(false);
+
+useEffect(() => {
+ setLoading(true);
+ fetchData().then(result => {
+ setData(result);
+ setLoading(false);
+ });
+}, []);
+```
+
+#### Vue
+```typescript
+const data = ref(null);
+const loading = ref(false);
+
+onMounted(async () => {
+ loading.value = true;
+ data.value = await fetchData();
+ loading.value = false;
+});
+```
+
+---
+
+### 19. 防抖/节流
+
+#### React
+```typescript
+const debouncedSearch = useMemo(
+ () => debounce((value) => {
+ // 搜索逻辑
+ }, 300),
+ []
+);
+```
+
+#### Vue (使用 @vueuse/core)
+```typescript
+import { useDebounceFn } from '@vueuse/core';
+
+const debouncedSearch = useDebounceFn((value) => {
+ // 搜索逻辑
+}, 300);
+```
+
+---
+
+### 20. 组件引用
+
+#### React useRef
+```tsx
+const inputRef = useRef
(null);
+
+
+inputRef.current?.focus();
+```
+
+#### Vue ref
+```vue
+
+
+
+
+
+```
+
+---
+
+## 📝 常见陷阱
+
+### 1. ref 值访问
+```typescript
+// ❌ 错误
+const count = ref(0);
+console.log(count); // RefImpl 对象
+
+// ✅ 正确
+const count = ref(0);
+console.log(count.value); // 0
+```
+
+### 2. 响应式对象
+```typescript
+// ❌ 错误 - 解构会失去响应性
+const { name } = user;
+
+// ✅ 正确 - 使用 toRefs
+const { name } = toRefs(user);
+```
+
+### 3. 数组更新
+```typescript
+// React
+setItems([...items, newItem]);
+
+// Vue
+items.value.push(newItem);
+// 或
+items.value = [...items.value, newItem];
+```
+
+### 4. 对象更新
+```typescript
+// React
+setUser({ ...user, name: 'John' });
+
+// Vue (ref)
+user.value = { ...user.value, name: 'John' };
+
+// Vue (reactive)
+user.name = 'John'; // 直接修改
+```
+
+---
+
+## 🎯 最佳实践
+
+1. **优先使用 `ref` 处理基本类型，`reactive` 处理对象**
+2. **使用 `computed` 而不是 `watch` 处理派生状态**
+3. **使用 `watchEffect` 处理副作用，`watch` 处理特定依赖**
+4. **使用 Pinia 管理全局状态，而不是 provide/inject**
+5. **使用 `
+