React 与 Vue 对比指南

本文用于学习，来自宇阳，将展示如何在 React 和 Vue 中实现常见功能，从基础渲染到高级状态管理

Hello

分别使用 react 和 vue 写一个 Hello World！

react

export default () => {
    return <div>Hello World!</div>;
}

vue

<template>
  <div>Hello World!</div>
</template>

属性绑定

react

通过 {} 绑定属性

export default () => {
  const url = "https://liuyuyang.net"
  return <a href={url}>跳转</a>;
}

vue

通过 : 绑定属性

<script setup lang="ts">const url = "https://liuyuyang.net"</script>

<template>
  <!-- <a href="https://liuyuyang.net"></a> -->
  <a :href="url">跳转</a>
</template>

表达式

react

react 的表达式是单括号

export default () => {
  const value = "Hello World!"
  const getValue = () => "Hello"
  const getImage = () => "https://liuyuyang.net"

  return (
    <>
      <div>{value}</div>
      <div>{true ? 'yes' : 'no'}</div>
      <div>{getValue()}</div>

      <img src={getImage() + '/1.jpg'} />
      <div style={{ background: true ? 'red' : 'blue' }}>{value}</div>
    </>
  )
}

vue

vue 的表达式是双括号

<script setup lang="ts">const value = "Hello World!"
const getValue = () => "Hello"
const getImage = () => "https://liuyuyang.net"</script>

<template>
  <div>{{ value }}</div>
  <div>{{ true ? 'yes' : 'no' }}</div>
  <div>{{ getValue() }}</div>

  <img :src="getImage() + '/1.jpg'" />
  <div :style="{ background: true ? 'red' : 'blue' }">{{ value }}</div>
</template>

动态类名

react

react 定义类名的方式为 className

export default () => {
  return <div className={`${true ? 'aaa' : 'bbb'}`}>Hello World!</div>
}

vue

vue 定义类名的方式为 class

<script setup lang="ts">
</script>

<template>
  <div :class="`${true ? 'aaa' : 'bbb'}`">Hello World!</div>
  <div :class="{ aaa: true }">Hello World!</div>
  <div :class="{ 'aaa-bbb': true }">Hello World!</div>
</template>

条件渲染

react

react 大多数语法都比较偏向原生

export default () => {
  const active = 1
  return (
    <>
      {
        active === 1
        ? <div>aaa</div>
        : active === 2
        ? <div>bbb</div>
        : <div>ccc</div>
      }
    </>
  )
}

vue

vue 可以使用 v-if 或 v-show 进行条件渲染

渲染数据

react

react 虽然有点语法写起来没有 vue 简单，但他的有点在于更加灵活、自由，非常受益于大型复杂的项目

vue

vue 使用 v-for 进行数据渲染

事件处理

react

react 的 onClick 需要的是一个函数

react 事件传参方式

vue

vue 的 @click 需要的是实例上已有的函数，比如在当前文件以及全局定义或内置的函数。因为 alert 不在实例上，因此不能直接 @click="alert('Hello World!')"，但我们可以在当前文件定义一个函数，在函数里面使用 alert，然后调用这个函数