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

Vue2 与 React 的区别

【5年以上前端】Vue 和 React 的区别看这里 - 知乎

vue和react的区别_vue react-CSDN博客

Vue 和 React 有什么不同?_vue和react区别-CSDN博客 


1、相同点:

① 都使用了虚拟 DOM;

② 组件化开发;

③ 都是单向数据流(父子组件之间,不建议子修改父传下来的数据);

④ 都支持服务端渲染

2、不同点:

① 响应式原理不同

Vue 采用双向数据绑定的响应式原理,实现了数据更新自动更新视图;

Vue2 响应式的特点就是依赖收集。数据变化的时候自动派发更新。

初始化时通过 Object.defineProperty 递归劫持 data 所有属性添加 getter / setter ,触发 getter 的时候进行依赖收集,修改时触发 setter 自动派发更新找到引用组件重新渲染。

Vue3 响应式使用原生 Proxy 重构了响应式。

一是 proxy 不存在响应式存在的缺陷,二是性能更好,不仅支持更多的数据结构,而且不用一开始递归劫持对象属性,而是代理第一层对象本身。运行时才递归,用到才代理。

用 effect 副作用来代替 Vue2 里的 watcher ,用一个依赖管理中心 trackMap 来统一管理依赖代替 Vue2 中的 Dep ,这样也不需要维护特别多的依赖关系,性能上取得很大进步。

React 单向数据流,需要手动 setState 来更新视图;

相比 Vue 的自动化, React 则是基于状态,单向数据流,数据不可变,需要手动 setstate 来更新,而且当数据改变时会以组件根为目录,默认全部重新渲染整个组件树,只能额外用
pureComponent / shouldComponentUpdate / useMemo / useallback 等方法来进行控制,更新粒度更大一些

② Diff 算法

 Vue2、Vue3 和 React 中 Diff 算法的区别_小草莓蹦蹦跳的博客-CSDN博客

Vue2 是同层比较新老 vnode ,新的不存在老的存在就删除,新的存在老的不存在就创建,子节点采用双指针头对尾两端对比的方式,全量 diff,然后移动节点时通过 splice 进行数组操作

Vue3 是采用 Map 数据结构以及动静结合的方式,在编译阶段提前标记静态节点, Diff 过程中直接跳过有静态标记的节点,并目子节点对比会使用一个 source 数组来记录节点位置及最长递增子序列算法优化了对比流程,快 Diff ,需要外理的边际条件会更少

React 是递归同层比较,标识差异点保存到 Diff 队列保存,得到 patch 树,再统一操作批量更新 DOM 。 Diff 总共就是移动、删除、增加三个操作,如果结构发生改变就直接卸载重新创建,如果没有则将节点在新集合中的位置和老集合中的 lastIndex 进行比较是否需要移动,如果遍历过程中发现新集合没有,但老集合有就删除

③ 模板语法不同:React 的JSX,Vue 的 template;

Vue 使用基于 HTML 的模板语法,可以将模板直接染成 DOM 元素。

React则采用 JSX 语法,通过 JSX 语法直接描述 UI 组件的结构和样式,再通过 React 的渲染函数将其转化为真实的DOM元素。

④ 状态管理不同:React 的 Redux、mobx;Vue 的 Vuex、pinia

Vue 提供了 Vuex、pinia 状态管理库,使得状态管理变得简单和易于维护。

React 则提供了 Redux、mobx 等状态管理工具,让状态管理更加灵活和可控。

个人感受方面来说的话,

React 官方只关注底层,上层应用解决方案都交给社区,所以 React 生态体系丰富,社区强,而且每次更新改动小等;

而 Vue 是由官方主导开发和维护,生态没那么丰富,虽然上手比 React 简单一些,但每次更新堪称破土重来,改的倒是潇洒得很,这就注定我们学习成本大大增加,并不能做到学习一次就可以一直使用这个框架,1.0 改版 2.0 需要重新学习一遍,2.0 改版 3.0 又要学习一遍,甚至 3.0 到 3.2 都要重学一部分。

像是需要记的 APIReact 就那么几个,剩下的自己去写就行了,Vue 虽然在代码维护上有一定优势,可是它的 API 就多得多了,而且还分版本,比如 Vue2 有过滤器,Vue3 却没了,不仅要多记很多 API 和自定义指令,还需要对自己所学的 API 根据版本进行选择使用,感觉不怎么严谨

⑤ 生命周期不同

Vue 的生命周期包含了8个钩子函数,比较细致且易于理解和掌握。

React 的生命周期包含了10个钩子函数,其中有些钩子函数是过时的,也有一些新的钩子函数被引入。 

⑥ 组件通信不同

Vue使用 props 和事件的方式进行父子组件之间的通信,同时也支持 Vuex 进行组件间通信。

React则主要通过 props 和回调函数的方式进行父子组件之间的通信,同时也支持 Redux 进行跨组件通信。

相关文章:

Vue2 与 React 的区别

【5年以上前端】Vue 和 React 的区别看这里 - 知乎 vue和react的区别_vue react-CSDN博客 Vue 和 React 有什么不同?_vue和react区别-CSDN博客 1、相同点: ① 都使用了虚拟 DOM; ② 组件化开发; ③ 都是单向数据流&#xff…...

【AI视野·今日Robot 机器人论文速览 第五十一期】Tue, 10 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Tue, 10 Oct 2023 Totally 54 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers On Multi-Fidelity Impedance Tuning for Human-Robot Cooperative Manipulation Authors Ethan Lau, Vaibhav Srivastava, Sh…...

零经验想跳槽转行网络安全,需要准备什么?

最近在后台看到很多私信都是有关转行网络安全的问题,目前咨询最多的都是:觉得现在的工作没有发展空间,替代性强,工资低,想跳槽转行网络安全。其中,他们主要关心的是:没有经验怎么学习&#xff1…...

Rust-是否使用Rc<T>

Rust的所有权机制,数据允许通过借用的方式,在函数的上下文中传递数据。如果离开数据作用的有效范围,这个借用就会失效,编译就会报错。这也是我们不会将借用(引用)作为函数的返回值的原因。下面的代码编译失败。 fn cr…...

论文解析——一种面向Chiplet互连的高效传输协议设计与实现

作者及发刊详情 熊国杰, 张津铭, 贺光辉. 一种面向Chiplet互连的高效传输协议设计与实现[J]. 计算机工程与科学, 2023, 45(08): 1339-1346.XIONG Guo-jie, ZHANG Jin-ming, HE Guang-hui. Design and implementation of an efficient transmission protocol for Chiplet inter…...

svo2.0 svo pro 编译运行

sudo apt-get install python-catkin-tools python-vcstool unable to locate python-vcstool 添加ros源 然后sudo apt update 依赖库下载,查看dependencies.yaml文件: 逐个clone到src目录下即可 dbow2_catkin 编译出错: 把https://gi…...

微信小程序前端生成动态海报图

//页面显示<canvas id"myCanvas" type"2d" style" width: 700rpx; height: 600rpx;" />onShareShow(e){var that this;let user_id wx.getStorageSync(user_id);let sharePicUrl wx.getStorageSync(sharePicUrl);if(app.isBlank(user_i…...

SQL如何导入数据以及第一次上机作业

如何导入excel数据 首先得学会导入数据 使用excel格式不需要改成其它格式&#xff08;如csv&#xff0c;txt&#xff09;&#xff0c;因为你改了到时候还是会报错&#xff08;实践过使用Sum统计总数一直说我数据格式有问题&#xff09; 首先右键TSGL数据库->任务->导入数…...

数据结构-----红黑树简介

目录 前言 1.什么是红黑树&#xff1f; 2.为什么需要红黑树&#xff1f;&#xff08;与AVL树对比&#xff09; 3.红黑树的特性 前言 在此之前我们学习过了二叉排序树和平衡二叉树&#xff08;AVL树&#xff09;&#xff0c;这两种树都是属于搜索树的一种&#xff0c;那么今天…...

哈佛教授因果推断力作:《Causal Inference: What If 》pdf下载

因果推断是一项复杂的科学任务&#xff0c;它依赖于多个来源的三角互证和各种方法论方法的应用&#xff0c;是用于解释分析的强大建模工具&#xff0c;同时也是机器学习领域的热门研究方向之一。 今天我要给大家推荐的这本书&#xff0c;正是因果推断领域必读的入门秘籍&#…...

Drecom 的《Eternal Crypt - Wizardry BC -》加入 The Sandbox 啦!

经典 “Wizardry” 游戏系列的新区块链迭代将通过全球合作拓展 Web3 游戏宇宙。 我们非常高兴地宣布&#xff0c;沙盒游戏公司与富有远见的传奇游戏《Wizardry》系列创造者 Drecom 将建立充满活力的合作伙伴关系。我们将共同推出《Eternal Crypt - Wizardry BC -》&#xff0c…...

外贸网站流量下降可能是这五点原因造成的

随着互联网的发展&#xff0c;企业开始重视网站优化&#xff0c;越来越多的人开始从事网站优化工作&#xff0c;然而真正做起来&#xff0c;很多站长朋友并非一帆风顺&#xff0c;往往越到很多问题&#xff0c;比如外贸网站流量出现异常下降情况&#xff0c;但很多时候在遇到外…...

交通部 EDI是什么?如何处理?

交通部于1996年开始实施《国际集装箱运输电子信息传输和运作系统及示范工程》&#xff0c;即在中国远洋运输集团、上海口岸、宁波口岸、天津口岸和青岛口岸建立 EDI 示范工程。 交通部 EDI 的数据结构 电子口岸或者其他物流企业需要确保能够生成和解析符合交通部要求的EDI数据…...

【Redis】Java Spring操作redis

目录 引入Redis依赖StringRedisTemplate使用String使用List使用Set使用hash使用zset 引入Redis依赖 StringRedisTemplate 此处RedisTemplate是把这些操作Redis的方法&#xff0c;分成了几个类别&#xff0c;分门别类的来组织的。 此处提供的一些接口风格&#xff0c;和原生的Re…...

如何养好一个微信新号?

最近听到一句话&#xff0c;“微信是个完整的互联网”。 你还真别说&#xff0c;真是。如果你还觉得微信只是个聊天视频打电话的工具&#xff0c;那可就有信息差了。 微信有各种各样的小程序&#xff0c;有打车的&#xff0c;有交话费的&#xff0c;有游戏&#xff0c;可以说&a…...

flutter问题汇总

一直卡在building a flutter app for general distribution&#xff1b; AS Message窗口显示 依赖下载失败&#xff1a; 1、修改仓库地址的配置&#xff1a;android/build.gradle repositories {maven { url https://download.flutter.io }maven { url "https://maven.a…...

2.1 初探大数据

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;什么是大数据&#xff08;二&#xff09;大数据的特征1、Volume - 数据量大2、Variety - 数据多样3、Velocity - 数据增速快4、Value - 数据价值低5、Veracity - 数据真实性 &#xff08;三&#xff0…...

论自动化测试中的xpath | 多语言测试最新案例

XPath&#xff08;XML Path Language&#xff09;是一门在XML文档中查找信息的语言。XPath是XML处理中非常重要的组成部分&#xff0c;能大大简化文档的解析和处理。它与XSLT、XPointer等标准一起被广泛应用于XML的解析处理。 一般情况下&#xff0c;xpath主要应用在以下几个方…...

CSS基础详细解析(附带综合小练习)

目标&#xff1a;掌握 CSS 属性基本写法&#xff0c;能够使用文字相关属性美化文章页。 01-CSS初体验 层叠样式表 (Cascading Style Sheets&#xff0c;缩写为 CSS&#xff09;&#xff0c;是一种 样式表 语言&#xff0c;用来描述 HTML 文档的呈现&#xff08;美化内容&#…...

react中ant.design框架配置动态路由

目录 什么是动态路由&#xff1f; 应用场景&#xff1a; ant.design动态路由如何配置&#xff1a; 首先&#xff1a;找到app.tsx文件 然后&#xff1a;找到menuHeaderRender 其次&#xff1a;修改menuHeaderRender为menuDataRender​编辑 最后&#xff1a;在箭头函数里re…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...