通俗易懂，一看就懂的React与Vue的区别

最新推荐文章于 2025-06-28 16:12:30 发布

原创最新推荐文章于 2025-06-28 16:12:30 发布 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #vue.js

React 和 Vue 是当前最主流的前端框架，对开发者而言，日常开发中它们的区别可以总结为以下几点（用实际场景举例说明）：

一、写模板的方式不同

React：用 JSX（JavaScript + HTML 混合写法），所有 UI 逻辑都在 JavaScript 中完成。
Vue：用类似 HTML 的模板语法，逻辑和模板分离，但也可以通过 JSX 扩展。

// React 组件（JSX）
function Button() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>点击 {count}</button>;
}

<!-- Vue 组件（模板语法） -->
<template>
  <button @click="count++">点击 {{ count }}</button>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  }
}
</script>

日常区别：

React 开发者需要适应 JSX 的混合写法（比如 className 代替 class）。
Vue 开发者更像在写传统 HTML，对新手更友好（比如 v-if 代替条件渲染）。

二、响应式数据更新方式不同

React：手动控制状态更新（通过 useState/setState），依赖不可变数据。
Vue：自动追踪依赖，直接修改数据即可触发更新。

// React：必须通过 setState 更新
function App() {
  const [list, setList] = useState([1, 2, 3]);
  const addItem = () => {
    setList([...list, list.length + 1]); // 必须生成新数组
  };
  return <button onClick={addItem}>添加</button>;
}

<!-- Vue：直接修改原数组 -->
<template>
  <button @click="addItem">添加</button>
</template>

<script>
export default {
  data() {
    return { list: [1, 2, 3] };
  },
  methods: {
    addItem() {
      this.list.push(this.list.length + 1); // 直接修改原数组
    }
  }
}
</script>

日常区别：

React：通过 Hooks（如 useEffect、自定义 Hook）复用逻辑。
Vue：通过组合式 API（setup + ref/reactive）或 Options API。

三、组件复用逻辑的方式不同

React：手动控制状态更新（通过 useState/setState），依赖不可变数据。
Vue：自动追踪依赖，直接修改数据即可触发更新。

// React 自定义 Hook
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

function App() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>{count}</button>;
}

<!-- Vue 组合式 API -->
<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>