React与Vue对比指南-上

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 = " liuyuyang.net" return <a href={url}>跳转</a>; } vue

通过 : 绑定属性

<script setup lang="ts"> const url = " liuyuyang.net" </script> <template> <!-- <a href=" liuyuyang.net"></a> --> <a :href="url">跳转</a> </template> 表达式 react

react 的表达式是单括号

export default () => { const value = "Hello World!" const getValue = () => "Hello" const getImage = () => " 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 = () => " 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 进行条件渲染

<script setup lang="ts"> const active = 1 </script> <template> <div v-if="active === 1">aaa</div> <div v-else-if="active === 2">bbb</div> <div v-else="true">ccc</div> </template> 渲染数据 react

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

export default () => { const list = ['aaa', 'bbb', 'bbb'] return ( <ul> { list.map((item, index) => { return <li key={index}>{item}</li> }) } </ul> ) } vue

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

<script setup lang="ts"> const list = ['aaa', 'bbb', 'bbb'] </script> <template> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </template> 事件处理 react

react 的 onClick 需要的是一个函数

export default () => { const func = () => alert("Hello World!") // return <button onClick={() => alert("Hello World!")}>点击弹框</button>; return <button onClick={func}>点击弹框</button>; }

react 事件传参方式

export default () => { const func = (msg: string) => { alert(msg) } return <button onClick={() => func('Hello World!')}>点击弹框</button>; } vue

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

<script setup lang="ts"> const func = () => { alert('Hello World!') } </script> <template> <!-- <button v-on:click="func">点击弹框</button> --> <button @click="func">点击弹框</button> </template>

vue 事件传参方式

<script setup lang="ts"> const func = (msg: string) => { alert(msg) } </script> <template> <button @click="func('Hello World!')">点击弹框</button> </template> 状态处理 react

react 通过 useState 进行状态管理

import { useState } from "react"; export default () => { const [count, setCount] = useState(0) return ( <> <button onClick={() => setCount(count + 1)}>+1</button> <div>{count}</div> </> ); } vue

vue 通过 ref 或 reactive 进行状态管理

<script setup lang="ts"> import { ref } from 'vue'; const count = ref(0) // count.value = 100 在脚本中需要加.value，在模板中则不需要 </script> <template> <button @click="count++">+1</button> <button @click="() => count++">+1</button> <div>{{ count }}</div> </template> 表单处理 react

表单处理这一点个人感觉 react 要比 vue 麻烦些

import { useState } from "react"; export default () => { const [value, setValue] = useState("") return ( <> <input type="text" value={value} onChange={e => setValue(e.target.value)} /> <div>{value}</div> </> ); } vue

双向数据绑定，vue 的一大特性，这个语法糖非常好用

<script setup lang="ts"> import { ref } from 'vue' const value = ref("") </script> <template> <input type="text" v-model="value"> <div>{{ value }}</div> </template> 数据侦听 react

react 通过 useEffect 监听数据的变化

import { useEffect, useState } from "react" export default () => { const [count, setCount] = useState(0) useEffect(() => { console.log(count) }, [count]) return <button onClick={() => setCount(count + 1)}>+1</button> } vue

vue 通过 watch 监听数据的变化

<script setup lang="ts"> import { ref, watch } from 'vue'; const count = ref(0) // watch(() => count.value, (newValue, oldValue) => { watch(count, (value) => { console.log(value); }) </script> <template> <button @click="count++">+1</button> </template> 计算属性 react

react 通过 useMemo 实现计算属性

import { useMemo, useState } from "react" export default () => { const [count, setCount] = useState(0) const newCount = useMemo(() => count * 2, [count]) return ( <> <h1>{count} {newCount}</h1> <button onClick={() => setCount(count + 1)}>+1</button> </> ) } vue

vue 通过 computed 实现计算属性

<script setup lang="ts"> import { ref, computed } from 'vue'; const count = ref(0) const newCount = computed(() => count.value * 2) </script> <template> <h1>{{ count }} {{ newCount }}</h1> <button @click="count++">+1</button> </template> 下期内容

下一期内容为：组件、路由、全局状态管理、以及两种框架完成相同的 Demo