API设计哲学对比深度解析

一句话概括

Vue 的模板语法和 React 的 JSX，看似只是两种写法，本质上代表了两套截然不同的心智模型：Vue 认为「HTML 是天然的 UI 骨架，我们增强它」，React 则认为「组件就是 JavaScript 函数，UI 只是它的返回值」。理解这种设计哲学分歧，比记住语法区别更重要——它能让你在不同场景下做出正确的技术决策。

核心知识点

1. JSX vs Template：JavaScript 的表达力 vs 编译器的优化空间

JSX 是 React.createElement 的语法糖，本质上是 JavaScript。这意味你可以在 JSX 中使用任何 JS 表达式：

// ✅ JSX：JS 能力全开
function TodoList({ items, user }) {
  return (
    <div>
      {user?.isVip && <VipBadge />}                         {/* 短路运算 */}
      {loading ? <Spinner /> : items.map(i => <Item key={i.id} {...i} />)}  {/* 三元+map */}
      {tags.filter(Boolean).join(' · ')}                    {/* 链式调用 */}
    </div>
  )
}

Vue 模板是增强版 HTML，由编译器在构建阶段分析优化：

<!-- Vue 模板：编译器能静态分析整个树 -->
<template>
  <div>
    <!-- Block Tree：Vue3 编译器知道哪些是静态节点，只追踪动态的 -->
    <h1>静态标题</h1>                  <!-- 编译后提升，只创建一次 -->
    <span :class="{ active }">动态</span> <!-- 标 patchFlag，精准跳过不变部分 -->
    <p v-if="user?.isVip">VIP 专属</p>
    <Spinner v-if="loading" />
    <Item v-for="i in items" :key="i.id" v-bind="i" v-else />
  </div>
</template>

关键认知：JSX 给编译器的是一个黑盒函数，Vue 模板给编译器的是一个可静态分析的 AST。这就是为什么 Vue3 能做 Block Tree、patchFlags 等编译时优化，而 React 直到 Compiler（React 19 的实验特性）才开始能做一些静态分析。

2. Composition API vs Hooks：setup 执行一次 vs 每次渲染都重新执行

这是两者最容易被忽视的底层差异：

// React Hooks：每次渲染组件函数都会完整执行一遍
function Counter() {
  console.log('每次渲染我都执行')  // 🔴 点一次按钮就打印一次

  const [count, setCount] = useState(0)  // 从 Hook 链表中按序取出
                                          // 执行顺序必须严格一致！
  useEffect(() => {
    document.title = `点击了 ${count} 次`
  }, [count])

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

// Vue Composition API：setup() / <script setup> 只执行一次
// <script setup>
console.log('只执行一次')  // 🟢 组件挂载时打印一次

const count = ref(0)       // 创建独立响应式对象，不依赖调用顺序

// watchEffect 建立了响应式依赖，数据变了自动重新执行
watchEffect(() => {
  document.title = `点击了 ${count.value} 次`
})

// ✅ 条件中创建 watch 完全没问题
if (count.value > 5) {
  watch(count, () => console.log('count 超过 5'))
}
// </script>

核心差异：React 用「链表 + 调用顺序」维护 hooks 状态，所以条件/循环中不能用 hook。Vue 用「Proxy 响应式对象」追踪依赖，ref() 创建的是独立对象，天然不存在顺序依赖——这也是 Composition API 为何没有「Rules of Hooks」。

3. 响应式机制：自动追踪 vs 手动触发

// Vue：改数据=改数据，框架自动知道动了什么
const state = reactive({ user: { name: 'Alice' }, items: [1, 2, 3] })
state.user.name = 'Bob'   // 只有用到 user.name 的组件才重渲染
state.items.push(4)       // 只有用到 items 的组件才重渲染
// 粒度：精确到属性级别

// React：必须通过 setter 通知框架「我变了」
const [user, setUser] = useState({ name: 'Alice' })
const [items, setItems] = useState([1, 2, 3])

// 改变数据必须调用 setter → 触发整个组件重渲染
setUser({ name: 'Bob' })
setItems(prev => [...prev, 4])
// 粒度：组件级别（React Compiler 之后可能改善）

工程上的连锁反应：Vue 的细粒度追踪让「变数据，不用想」成为可能；React 的不可变范式催生了 useMemo、useCallback、React.memo 一整套手动优化体系，但同时也让状态溯源和调试变得清晰。

4. Options API → Composition API：从「按选项组织」到「按关注点组织」

// Options API：把相关的逻辑拆散在不同选项中（组件大了很难找）
export default {
  data() { return { query: '', results: [] } },
  computed: { isEmpty() { return !this.results.length } },
  watch: { query: 'onSearch' },
  methods: { onSearch() { /* ... */ } },
  mounted() { this.onSearch() },
}

// Composition API：相关逻辑聚在一处，还能抽出去复用
function useSearch() {
  const query = ref('')
  const results = ref([])
  const isEmpty = computed(() => !results.value.length)
  const onSearch = async () => {
    results.value = await fetch(`/api?q=${query.value}`).then(r => r.json())
  }
  watch(query, onSearch)
  onMounted(onSearch)
  return { query, results, isEmpty, onSearch }
}
// 使用时直接引入——这就是「组合」的含义

其实你每天都在用

1. v-if vs &&：条件渲染。v-if="show" 读起来更像自然语言；{show && <Comp />} 更短但新手容易踩 falsy 值陷阱（0、'' 也会被渲染）。
2. v-model vs value + onChange：表单绑定。v-model 一个指令搞定双向绑定；React 里手动写 value 和 onChange 更啰嗦但更可控。
3. v-for vs .map()：列表渲染。v-for="item in items" 像中英混杂的伪代码；items.map(item => <Item />) 是纯 JS 思维。
4. @click vs onClick：事件绑定。Vue 用 @ 更接近模板思维；React 的 onClick 就是 JS 属性，本质没有任何区别。
5. computed vs useMemo：派生状态。Vue 的 computed 自动追踪依赖，你只管声明；React 需要手写依赖数组，但这也让你更清楚「它依赖了什么」。

常见误解（FAQ）

❌ 误区：「JSX 比模板强，因为它是 JavaScript」

事实上两者都会被编译成 render 函数。模板语法「弱」的地方恰好是编译器「强」的起点——因为模板是静态可分析的，编译器能做 Block Tree、静态提升、事件缓存等 JSX 很难做的深度优化。React Compiler 的出现恰恰说明「JSX 也太灵活了」，需要额外工具来分析。

❌ 误区：「Composition API 就是 Vue 版的 Hooks」

名字像，用法像，但底层原理完全不同。Hooks 依赖函数调用顺序，setup 只执行一次；Hooks 每次渲染都跑，Composition API 只在创建时的 setup 里初始化响应式依赖。用 Vue 去照搬 React 的 useCallback/useMemo 思维，反而会写出不优雅的代码。

❌ 误区：「Vue 适合小项目，React 适合大项目」

项目大小取决于工程化体系，不是模板 vs JSX。Vue 的大型项目（Ele.me、BiliBili）和 React 的小型应用一样被广泛验证。真正决定选型的是：团队对「把复杂逻辑藏在模板里」的容忍度，以及对「JS 表达力 vs 框架约束」的偏好。

❌ 误区：「Vue3 现在推荐 Composition API，Options API 就别用了」

Vue 官方明确表示两者长期共存。Options API 适合简单组件（数据、方法、计算属性各归各位一目了然），Composition API 适合复杂逻辑需要提取复用的场景。好的实践是：看逻辑复杂度，而不是看「新不新」。

一句话总结

Vue 把复杂性藏在框架里（模板编译优化、自动依赖追踪），React 把复杂性交给开发者自己掌控（手动标依赖、不可变更新）——这不是谁更好，而是一个「框架替你做决策」vs「你拥有所有决策权」的 trade-off。选工具之前，先想清楚你愿意把什么交出去。