Vue、React在某些语法上的使用差异

最新推荐文章于 2024-04-11 15:13:40 发布

鸭绒

最新推荐文章于 2024-04-11 15:13:40 发布

阅读量393

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React vue 文章标签： react vue 前端

本文链接：https://blog.csdn.net/weixin_43334673/article/details/111352598

本文对比了React和Vue在模板语法、指令、组件使用、数据传递和组件私有数据方面的不同。Vue使用HTML模版语法，如v-for、v-if等指令，而React依赖JSX。在组件使用上，Vue需注册后使用，React直接导入即可。父传子数据，两者都通过props，但Vue使用对象扩展运算符，React需显式设置。组件私有数据，Vue用data，React用state，修改数据时React需用setState进行优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React、Vue都是当前非常热门的前端JS框架，两者的性能都非常好，这篇博客主要是作为笔记，用于区分React、Vue一些功能相同但语法不同的对比，以防止混淆两者。

一、Vue、React模板

Vue.js 使用了基于 HTML 的模版语法：

数据绑定最常见的形式就是使用{ {...}}（双大括号）

<div id="app">
    {
   
   {
   
   5+5}}<br>
    {
   
   {
   
    ok ? 'YES' : 'NO' }}<br>
    {
   
   {
   
    message.split('').reverse().join('') }}
</div>

动态绑定属性使用v-bind:name="变量名"或语法糖方式:name="变量名"。

<div :class="{'类名': 控制是否添加该类的变量}"></div>
<div :class="{'container': isShow }"></div>

React使用JSX语法：

数据绑定或者js语法都使用{}(单大括号)

<div id="app">
    {
   
   5+5}<br>
    {
   
   ok ? 'YES' : 'NO' }<br>
    {
   
    message.split('').reverse().join('') }
</div>

属性绑定同样使用{}

<div className={
   
   container}></div>

注意：react中想要给元素添加类,需要使用className.

二、Vue模板有指令，而React没有

Vue指令：

v-for
v-if
v-model
v-bind
…

Vue中有这些指令，可以很方便的渲染列表，绑定事件，控制是否隐藏元素。那么React中没有指令之说，那么要想实现渲染列表，控制隐藏元素就相对Vue更复杂。

1.示例：渲染列表

	var arr=[1,2,3,4,5]

Vue:

<template>

最低0.47元/天解锁文章

200万优质内容无限畅学