当前位置： 首页 > news >正文

React 第二十九章 React 和 Vue 描述页面的区别

news 2026/2/4 17:41:18

面试题：React 和 Vue 是如何描述 UI 界面的？有一些什么样的区别？
标准且浅显的回答：
React 中使用的是 JSX，Vue 中使用的是模板来描述界面

前端领域经过长期的发展，目前有两种主流的描述 UI 的方案：

  • JSX
  • 模板

JSX 历史来源

JSX 最早起源于 React 团队。在 React 中所提供的一种类似于 XML 的 ES 语法糖：

const element = <h1>Hello</h1>

经过 Babel 编译之后，就会变成：

// React v17 之前
var element = React.createElement("h1", null, "Hello");// React v17 之后
var jsxRuntime = require("react/jsx-runtime");
var element = jsxRuntime.jsx("h1", {children: "Hello"});

无论是 17 之前还是 17 之后，执行了代码后会得到一个对象：

{"type": "h1","key": null,"ref": null,"props": {"children": "Hello"},"_owner": null,"_store": {}
}

这个其实就是大名鼎鼎的虚拟 DOM。

React 团队认为，UI 本质上和逻辑是有耦合部分的，例如：

  • 在 UI 上面绑定事件
  • 数据变化后通过 JS 去改变 UI 的样式或者结构

作为一个前端工程师，JS 是用得最多，所以 React 团队思考屏蔽 HTML，整个都用 JS 来描述 UI。因为这样做的话，可以让 UI 和逻辑配合得更加紧密，所以最终设计出来了类 XML 形式的 JS 语法糖

由于 JSX 是 JS 的语法糖（本质上就是 JS），因此可以非常灵活的和 JS 语法组合使用，例如：

  • 在 if 或者 for 当中使用 jsx
  • 将 jsx 赋值给变量
  • 将 jsx 当作参数来传递
  • 在一个函数中返回一段 jsx

示例代码

function App({isLoading}){if(isLoading){return <h1>loading...</h1>}return <h1>Hello World</h1>;
}

这种灵活性就使得 jsx 可以轻松的描述复杂的 UI，如果和逻辑配合，还可以描述出复杂 UI 的变化。

使得 React 社区的早期用户可以快速实现各种复杂的基础库，丰富社区生态。又由于生态的丰富，慢慢吸引了更多的人来参与社区的建设，从而源源不断的形成了一个正反馈。

模板的历史来源

模板的历史就要从后端说起。

在早期前后端未分离的时候，最流行的方案就是使用模板引擎。模板引擎可以看作是在正常的 HTML 上面进行挖坑（不同的模板引擎语法不一样），挖了坑之后。服务器端会将数据填充到挖了坑的模板里面，生成对应的 html 页面返回给客户端。

image-20211103140631869

所以在那个时期前端人员的工作，主要是 html、css 和一些简单的 js 特效（轮播图、百叶窗…）。写好的 html 是不能直接用的，需要和后端确定用的是哪一个模板引擎，接下来将自己写好的 html 按照对应模板引擎的语法进行挖坑

image-20211103143319523

不同的后端技术对应的有不同的模板引擎，甚至同一种后端技术，也会对应很多种模板引擎，例如：

  • Java（JSP、Thymeleaf、Velocity、Freemarker）
  • PHP（Smarty、Twig、HAML、Liquid、Mustache、Plates）
  • Python（pyTenjin、Tornado.template、PyJade、Mako、Jinja2）
  • node.js（Jade、Ejs、art-template、handlebars、mustache、swig、doT）

模板引擎代码片段

  • twig 模板引擎
基本语法
{% for user in users %}* {{ user.name }}
{% else %}No users have been found.
{% endfor %}指定布局文件
{% extends "layout.html" %}
定义展示块
{% block content %}Content of the page...
{% endblock %}
  • blade 模板引擎
<html><head><title>应用程序名称 - @yield('title')</title></head><body>@section('sidebar')这是 master 的侧边栏。@show<div class="container">@yield('content')</div></body>
</html>
  • EJS 模板引擎
<h1><%=title %>
</h1>
<ul><% for (var i=0; i<supplies.length; i++) { %><li><a href='supplies/<%=supplies[i] %>'><%= supplies[i] %></a></li><% } %>
</ul>

这些模板引擎对应的模板语法就和 Vue 里面的模板非常的相似。

现在随着前后端分离开发的流行，已经没有再用模板引擎的模式了，后端开发人员只需要书写数据接口即可。但是如果让一个后端人员来开前端的代码，那么 Vue 的模板语法很明显对于后端开发人员来讲要更加亲切一些。

最后我们做一个总结，虽然现在前端存在两种方式：JSX 和模板的形式都可以描述 UI，但是出发点是不同

  • 模板语法的出发点是，既然前端框架使用 HTML 来描述 UI，那么我们就扩展 HTML。让 HTML 种能够描述一定程度的逻辑，也就是“从 UI 出发，扩展 UI，在 UI 中能够描述逻辑”。

  • JSX 的出发点，既然前端使用 JS 来描述逻辑，那么就扩展 JS，让 JS 也能描述 UI，也就是“从逻辑出发，扩展逻辑，描述 UI”。

这两者虽然都可以描述 UI，但是思路或者说方向是完全不同的，从而造成了整体框架架构上面也是不一样的。

真题解答

题目：React 和 Vue 是如何描述 UI 界面的？有一些什么样的区别？

参考答案

在 React 中，使用 JSX 来描述 UI。因为 React 团队认为UI 本质上与逻辑存在耦合的部分，作为前端工程师，JS 是用的最多的，如果同样使用 JS 来描述 UI，就可以让 UI 和逻辑配合的更密切。

使用 JS 来描述页面，可以更加灵活，主要体现在：

  • 在 if 语句和 for 循环中使用 JSX
  • 将 JSX 赋值给变量
  • 可以把 JSX 当作参数传入
  • 在函数中返回 JSX

而模板语言的历史则需要从后端说起。早期在前后端未分离时代，后端有各种各样的模板引擎，其本质是扩展了 HTML，在 HTML 中加入逻辑相关的语法，之后在动态的填充数据进去。
如果单看 Vue 中的模板语法，实际上和后端语言中的各种模板引擎是非常相似的。

总结起来就是：

模板语法的出发点是，既然前端框架使用 HTML 来描述 UI，那么就扩展 HTML 语法，使它能够描述逻辑，也就是“从 UI 出发，扩展 UI，在 UI 中能够描述逻辑”。

而 JSX 的出发点是，既然前端使用 JS 来描述逻辑，那么就扩展 JS 语法，让它能够描述 UI，也就是“从逻辑出发，扩展逻辑，描述 UI”。

虽然这两者都达到了同样的目的，但是对框架的实现产生了不同的影响。

相关文章：

React 第二十九章 React 和 Vue 描述页面的区别

面试题&#xff1a;React 和 Vue 是如何描述 UI 界面的&#xff1f;有一些什么样的区别&#xff1f; 标准且浅显的回答&#xff1a; React 中使用的是 JSX&#xff0c;Vue 中使用的是模板来描述界面 前端领域经过长期的发展&#xff0c;目前有两种主流的描述 UI 的方案&#xf…...

编程日记 2024/5/10 11:39:47

Dnspy附加进程调试---代码被优化及无法获取局部变量

代码被优化或者无法获取局部变量的效果图如下&#xff1a; 当你在调试的时候&#xff0c;看到这种情况还是挺恼火的&#xff0c;经过查阅资料后&#xff0c;发现可以这种解决&#xff1a; 参考链接&#xff1a;Making an Image Easier to Debug dnSpy/dnSpy Wiki GitHub 假设…...

编程日记 2024/5/10 11:36:43

Redis---------实现更改数据业务，包括缓存更新，缓存穿透雪崩击穿的处理

三种更新策略 内存淘汰是Redis内存的自动操作&#xff0c;当内存快满了就会触发内存淘汰。超时剔除则是在存储Redis时加上其有限期(expire)&#xff0c;有限期一过就会自动删除掉。而主动更新则是自己编写代码去保持更新&#xff0c;所以接下来研究主动更新策略。 主动更新策略…...

编程日记 2024/5/10 11:35:42

蓝牙小车的具体实现

title: 蓝牙小车开发时的一些细节 cover: >- https://tse1-mm.cn.bing.net/th/id/OIP-C.BrSgB91U1MPHGyaaZEqcbwHaEo?w273&h180&c7&r0&o5&dpr1.3&pid1.7 abbrlink: 842d5faf date: tags: #小车基本运动之最重要的—PWM ##1.PWM&#xff08;Pulse …...

编程日记 2024/5/10 11:34:41

污染修复乙级设计资质中关于设计成果保护的规定

关于污染修复乙级设计资质中设计成果的保护&#xff0c;虽然直接针对该资质的设计成果保护规定可能未在公开资料中有详细阐述&#xff0c;但根据中国知识产权法律体系和行业惯例&#xff0c;设计成果作为智力成果的一部分&#xff0c;主要受以下几个方面的法律保护&#xff1a;…...

编程日记 2024/5/10 11:33:39

##10 卷积神经网络（CNN）：深度学习的视觉之眼

文章目录 前言1. CNN的诞生与发展2. CNN的核心概念3. 在PyTorch中构建CNN4. CNN的训练过程5. 应用：使用CNN进行图像分类5. 应用：使用CNN进行时序数据预测代码实例7. 总结与展望前言 在深度学习的领域中，卷积神经网络（CNN）已经成为视觉识别任务的核心技术。自从AlexNet在2…...

编程日记 2024/5/10 11:31:37

Linux下添加自己的服务脚本（service）

systemd服务文件（service file）是用来定义和配置systemd服务的文件，通常以.service为后缀。以下是service文件的详细格式和内容说明： 1 文件路径 /etc/systemd/system（供系统管理员和用户使用）系统服务，开机不需要登录就能运行的程序/usr/lib/systemd/system（供发行版…...

编程日记 2024/5/10 11:28:33

C++:内存管理

C:内存管理 一、C/C内存分布二、C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free三、C内存管理方式1.new/delete操作内置类型2.new和delete操作自定义类型 四、operator new与operator delete函数&#xff08;重点&#xff09;五、new和delete的实现原理1.内置…...

编程日记 2024/5/10 11:27:31

Veeam - 数据保护和管理解决方案_Windows平台部署备份还原VMware手册

Veeam - - 数据保护和管理解决方案 Veeam Backup & Replication Console Veeam Data Platform Veeam Backup & Replication是一款强大的虚拟机备份、恢复和复制解决方案 安全备份、干净恢复和数据弹性 — 即时交付 在混合云中随时随地管理、控制、备份和恢复您的所有数…...

编程日记 2024/5/10 11:26:30

易基因：Nature子刊：ChIP-seq等揭示c-di-AMP与DasR互作以调控细菌生长、发育和抗生素合成｜项目文章

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 c-di-AMP是一种在细菌信号中普遍存在且至关重要的核苷酸第二信使&#xff0c;对于大多数c-di-AMP合成生物体来说&#xff0c;c-di-AMP稳态及其信号转导的分子机制非常值得关注。 2024年…...

编程日记 2024/5/10 11:24:27

stm32学习探究：利用TB6612驱动直流电机

在这篇文章中&#xff0c;我们将探讨如何使用STM32微控制器和TB6612FNG直流电机驱动模块来驱动直流电机。TB6612FNG是一款基于MOSFET的H桥集成电路&#xff0c;能够独立双向控制两个直流电机&#xff0c;非常适合用于小型机器人或双轮车等项目。 一、TB6612FNG 驱动模块介绍 …...

编程日记 2024/5/10 11:22:24

SpringBatch快速入门

Job监听 Spring Batch的Job监听是一种机制&#xff0c;用于在Job的不同阶段插入自定义的逻辑。它允许开发人员在Job开始、结束、失败等不同的事件发生时执行特定的操作。 具体来说&#xff0c;Spring Batch提供了以下几个Job监听器&#xff1a; JobExecutionListener&#xff…...

编程日记 2024/5/10 11:21:22

下载Node.js及其他环境推荐nvm

文章目录 项目场景&#xff1a;下载Node.js环境配置配置环境变量 安装脚手架安装依赖安装淘宝镜像安装 cnpm&#xff08;我需要安装&#xff09;nvm 安装 Node.js &#xff08;推荐&#xff09; 项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 项目…...

编程日记 2024/5/10 11:20:21

STM32 ADC学习

ADC Analog-to-Digital Converter&#xff0c;即模拟/数字转换器 常见ADC类型 分辨率和采样速度相互矛盾&#xff0c;分辨率越高&#xff0c;采样速率越低。 ADC的特性参数 分辨率&#xff1a;表示ADC能辨别的最小模拟量&#xff0c;用二进制位数表示&#xff0c;比如8,10…...

编程日记 2024/5/10 11:19:19

详解AI作画算法原理

在人工智能领域&#xff0c;AI作画技术已经成为一个引人入胜的研究方向。AI作画算法利用机器学习技术&#xff0c;尤其是深度学习&#xff0c;来生成具有艺术性的图像。本文将深入剖析AI作画的基本原理&#xff0c;包括其技术架构、关键组件以及工作流程。 引言 AI作画技术不…...

编程日记 2024/5/10 11:17:17

每日Attention学习3——Cross-level Feature Fusion

模块出处 [link] [code] [PR 23] Cross-level Feature Aggregation Network for Polyp Segmentation 模块名称 Cross-level Feature Fusion (CFF) 模块作用 双级特征融合 模块结构 模块代码 import torch import torch.nn as nnclass BasicConv2d(nn.Module):def __init__(…...

编程日记 2024/5/10 11:13:12

华为eNSP学习—IP编址

IP编址 IP编址子网划分例题展示第一步：机房1的子网划分第二步：机房2的子网划分第三步：机房3的子网划分IP编址 明确：IPv4地址长度32bit，点分十进制的形式 ip地址构成=网络位+主机位 子网掩码区分网络位和主机位 学此篇基础： ①学会十进制与二进制转换 ②学会区分网络位和…...

编程日记 2024/5/10 11:11:08

数据库的要求

本来我是不准备写数据库的。而且是准备从零开始&#xff0c;学习python&#xff0c;学完语言学&#xff0c;会c和写作技法&#xff0c;再来学习数据库 那样做的复杂度是天量的&#xff0c;按部就班什么的具备&#xff0c;因为你完全不清楚什么时候就有这个基础和条件&#xff0…...

编程日记 2024/5/10 11:10:06

Spring MVC(二)

1. 注解RequestMapping修饰类 在Spring MVC中一般都是使用注解RequestMapping来映射请求&#xff0c;也就是通过它来指定控制器可以处理哪些URL请求&#xff0c;相当于Servlet中在web.xml中配置的映射地址作用一致。在上一节的内容中&#xff0c;我们通过注解RequestMapping改进…...

编程日记 2024/5/10 11:09:03

ECP44304T-76是一款增强型通信处理器吗？

ABB ECP44304T-76是一款增强型通信处理器&#xff0c;专为ABB的PLC控制系统设计。 这款通信处理器的主要功能是提供PLC与其他设备或网络之间的通信接口。它支持多种通讯协议&#xff0c;包括但不限于Profibus、Ethernet、Modbus等&#xff0c;使得PLC可以轻松集成到复杂的工业…...

编程日记 2024/5/10 11:08:01

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2026/1/31 11:58:35

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/1/20 7:21:36

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2026/1/28 9:00:05

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/9/18 22:43:13