NextJS官网实战01:Vue与React的区别

之前用的都是vue，趁着公司还未开始做这个官网项目，我个人一点一点挤时间学习为后面的基建开始打好铺垫。之前做的官网，要么纯vue来做，要么就是海外官网wordpress，古早一些就是html。这次主要是做国内WenDora Ai 的官网，Next.js也比Nuxt更成熟一些，顺带刺激刺激一下自己的大脑，接受知识的冲击吧啊哈哈哈哈哈。

学习来源：React官方文档和Next官方文档。

个人总结比较偏项目实战性，偏理论上的请点击前面的学习来源移步官方文档进行学习。

整体官方文档看下来后，粗浅的总结如下内容：

vue和react区别

Vue 更像"模板驱动 + 官方全家桶完整方案"。
React 更像"JavaScript 驱动视图 + 用组合拼出应用"
从 Vue 切到 React，最需要改的不是语法，而是：
- 从"模板思维"切到"函数组件思维"
- 从"响应式自动追踪"切到"状态变了就重新渲染"
- 从"配置式路由"切到"文件即路由"

1. 模板写法不同

javascript 复制代码

//vue 常见写法
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="count++">点击</button>
  </div>
</template>

//react 常见写法
export default function Demo() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{title}</h1>
      <button onClick={() => setCount(count + 1)}>点击</button>
    </div>
  );
}

2、数据流理念不同

Vue 和 React 都是单向数据流，但使用感不一样。

Vue：

props
emit
provide/inject
pinia

React：

props
回调函数上抛
context
第三方状态库

Vue 里父子通信通常是：

父传 props
子触发 emit

React 里通常是：

父传 props
子调用父传进来的函数

3、路由思维不一样

Vue 常见：

建一个 views/
再建一个 router/index.ts
手动配置 path 和 component

React + Next：

文件夹就是路由
不需要单独写 router 配置
app 目录天然就是路由系统

4、状态写法不同

javascript 复制代码

//vue 常见
/*
*Vue拿到的是一个响应式容器，修改.value或者对象属性就行了
*/
const count = ref(0);
count.value++;






//React 常见
/*
*react拿到的是当前的状态值，不能直接修改，要通过setState更新
*/
const [count, setCount] = useState(0);
setCount(count + 1);

5、官方生态差异

Vue 的官方整套方案更完整：

Vue
Vue Router
Pinia
Nuxt

React 官方更"核心库化"：

React 只管 UI
路由、数据、框架常常交给生态
Next.js 在 React 世界里承担了"官网/全栈/SEO 框架"的角色

Vue 更像一套默认答案，React 更像"给你自由拼装"
Next 则是 React 世界里帮你收拢工程方案的框架

5、实用对照表（粗浅版）

Vue 常见写法	React 常见写法
`v-if`	条件表达式
`v-for`	array.map()
`@click`	`onClick`
`:` 绑定属性	JSX 表达式
`ref` / `reactive`	`useState`
`computed`	普通计算 / 派生值
`watch`	`useEffect（`约等于`）`
`emit`	回调函数
`router/index.ts`	文件路由
`App.vue`	layout.tsx

6、核心区别

1、vue是【HTML模板+指令】，react是【JSX（本质上就是js里去写UI）】

2、vue常见的渲染是v-if、v-for、@click这种，react对应的都是js方法类，三元符判断、循环、onClick等这类

3、vue组件上像【配置对象】，react组件像【接收输入并返回UI的函数】

4、响应式的机制也不同，vue强调响应式系统，数据变了，模板依赖自动更新。react强调状态驱动重新渲染，状态变了，组件函数重新跑一遍，重新生成UI描述