React与Vue的区别_vue和react区别-程序员宅基地

技术标签: react.js  vue  前端  React  

React与Vue的相同点

(1)都支持服务器渲染

(2)都是数据驱动视图

在以前,我们需要频繁操作DOM实现页面效果。而Vue和React就隐藏了DOM的频繁操作,采用数据驱动视图的方式,只需要关注数据的变化。

(3)都遵循组件化思想
React和Vue都遵循组件化思想,它们把注意力放在UI层,将页面分成一一些细块,也就是组件,组件之间组合嵌套就形成最后的网页界面。

(4)都使用虚拟DOM

(5)都有状态管理

react有redux,vue有vuex。

不同点

(1)框架本质不同

Vue本质是MVVM框架,是由MVC发展来的;
React是前端组件框架,是由后端组件演化而来的。

(2)数据流不同;

Vue实现双向绑定,在vue1.0中有两种方法可以实现双向绑定,父子组件之间的props以及组件与DOM直接的v-model。vue2去掉了第一种双向绑定方法,通过v-model实现数据双向绑定。

React一直不支持双向绑定,提倡的是单向数据流(onChange/setState)。

(3)监听数据变化的实现原理不同;

Vue通过getter,setter以及一些函数的劫持,能精确知道数据的变化。
React是通过比较引用方式(diff)进行的,当应用的状态改变时,全部组件都会重新渲染。

(4)组件写法差异

React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中;
Vue 推荐的做法是 template 的单文件组件格式,即 html,css,JS 写在同一个文件(vue也支持JSX写法)

(5)渲染过程不同。

Vue可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

React在应用的状态被改变时,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制。

(6)在state上的不同;

React中,state对象需要用setState方法更新状态;
在Vue中,state对象不是必须的,数据由data属性在vue对象中管理。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_53186633/article/details/123747705

智能推荐

linux 设备树(.dts)实战解析_serial2 dts-程序员宅基地

文章浏览阅读1w次,点赞24次,收藏109次。文章目录前言设备树DTS语法内容标准属性向节点追加或修改内容设备树在目录中的体现Linux 内核解析 DTB 文件帮助文档信息设备树节点的操作函数1、查找节点的 of 函数2、查找父/子节点的 OF 函数3、提取属性值的 OF 函数前言在linux2.6中,ARM架构的板级硬件细节过多的被编码在arch/arm/plat-xxx和arch/arm/mach-xxx充斥着大量的板级信息,这些细节对应内核来说不过是垃圾。设备树设备树是一种描述硬件的数据结构,它起源于OpenFirmware。采用设备树后_serial2 dts

ethereal软件安装详解_etherealcsdn下载-程序员宅基地

文章浏览阅读6k次,点赞10次,收藏19次。首先得先安装winpcap3.1下载地址:WinPcap · Download然后安装:安装ethereal软件:地址:链接:https://pan.baidu.com/s/1nj5GEl1cKJxtqrcdkE-Iqw提取码:ut64复制这段内容后打开百度网盘手机App,操作更方便哦..._etherealcsdn下载

android自定义dialog不显示,有关问题解决之Android自定义Dialog无法dismiss-程序员宅基地

文章浏览阅读1.7k次。问题解决之Android自定义Dialog无法dismiss场景:点击ListView的一个Item,弹出自定义Dialog。在初始化Dialog时,将一个OnClickListener作为参数传递给Dialog。点击布局中设置的Button可以dismiss。问题:Dialog布局中的两个Button设置了监听但事件没有触发到。分析:1、Button确实添加了OnClickListener事件,..._kotlin 自定义dialog 不显示

走马灯 (滚动字幕效果)_layui 文字滚动效果-程序员宅基地

文章浏览阅读9.7k次。1. 走马灯UI控制脚本using UnityEngine;using System.Collections;using System.Collections.Generic;using CommonEnum;using PBClientClass;using System;public class UISystemTips : UIPanelBase { int _Max_layui 文字滚动效果

JavaScript对象详解,深入理解js对象_js撖寡情-程序员宅基地

文章浏览阅读2.9k次,点赞4次,收藏11次。定义:对象是JavaScript的基本数据类型。对象也是一种复合值:可以通过名字访问这些值,我们可以将对象看做是从字符串到值的映射,当然对象不仅仅是字符串到值的映射,除了自有的属性还可以从原型继承属性。创建对象:1.字面量方式 var empty={} //创建一个空对象 var obj={a:1,b:2};//两个属性的对象 var compObj={a:'1',b:'2',cc:{ d:'3', e:'4' } }; //复杂的对象._js撖寡情

#力扣LeetCode1984. 学生分数的最小差值 @FDDLC_力扣1984-程序员宅基地

文章浏览阅读145次。题目描述:1984. 学生分数的最小差值 - 力扣(LeetCode) (leetcode-cn.com)Java代码:class Solution { public int minimumDifference(int[] a, int k) { int ans=Integer.MAX_VALUE; Arrays.sort(a); for(int i=a.length-k;i>=0;i--){ ans=M_力扣1984

随便推点

面向云环境基于属性加密的密文分享系统——简介_属性加密cpabe的系统设计-程序员宅基地

文章浏览阅读3k次。一篇关于“面向云环境基于属性加密的密文分享系统”的简介_属性加密cpabe的系统设计

MapperFactoryBean和MapperScannerConfigurer的作用_mapperfactorybean作用-程序员宅基地

文章浏览阅读5.8k次,点赞5次,收藏8次。MapperFactoryBean和MapperScannerConfigurer的作用MapperFactoryBean是MyBatis-Spring团队提供的一个用于根据Mapper接口生成Mapper对象的类,通过MapperFactoryBean可以配置接口文件以及注入SqlSessionfactory,从而完成一个Bean的实例化。MapperScannerConfigurer是..._mapperfactorybean作用

Packet Tracer5.2使用的几个简单实验-程序员宅基地

文章浏览阅读238次。附件中是关于练习Packet Tracer5.2使用方法的3个简单的小实验,请同学们下载下来练习一下。 转载于:https://blog.51cto.com/coffee0546/199116_packet-tracer-5.2小综合实验

鸿蒙是Android开发的新出路吗?_鸿蒙开发 android开发-程序员宅基地

文章浏览阅读480次,点赞12次,收藏8次。2023年年尾,华为与各大应用厂商密集签约,使得鸿蒙操作系统再次引发关注,华为已经与包括游戏、社交通讯、出行导航、商务办公、旅游住宿等在内的18个领域的开发者及伙伴展开鸿蒙原生应用全面合作。到目前为止,鸿蒙生态的设备数量已经超过7亿,超400家企业已启动鸿蒙原生应用开发。_鸿蒙开发 android开发

VsCode单步调试 和 终端加载npy文件(报错要注意文件路径中是否含中文)_vue显示npy文件-程序员宅基地

文章浏览阅读1.5k次。VsCode单步调试 和 终端加载npy文件VsCode单步调试终端加载npy文件VsCode单步调试打开一个py文件,在vscode界面,按F5,会跳转到调试界面终端加载npy文件在vscode终端跑完整体文件,然后在终端:首先输入python,回车输入 import numpy as np,回车打开文件,必须加载文件所在位置,注意把路径的斜杠\改成python的/,并且路径需要检查是否有引号括起来,不然报错,feature = np.load(“E:/0607yan/0622 mach_vue显示npy文件

Windows Opencl clEnqueueReadBuffer()与clEnqueueWriteBuffer()函数-程序员宅基地

文章浏览阅读4.4k次。Windows Opencl clEnqueueReadBuffer()与clEnqueueWriteBuffer()函数详细解析Reading, Writing and Copying Buffer Objects以下函数将命令从缓冲区对象读入主机内存或从主机内存写入缓冲区对象。clEnqueueReadBuffer函数原型cl_int clEnqueueReadBuffer(cl_command_queue command_queue, cl_mem_clenqueuewritebuffer