素材巴巴 > 程序开发 >

react 和vue的理解

程序开发 2023-09-10 20:08:31

当我们的简历中写两个框架,面试官一定会对比着一些问题

对react的理解,对vue的理解,我们可以从下面四个方面回答

1是什么

2能干什么

3是如何干的

4干的怎么样   优点,缺点

5当然也可以补充一些其他的知识

首先说一下react

1是什么

官方文档 :用于构建用户界面的 JavaScript 库

2能干什么

可以通过组件化的方式来快速响应大型web应用

3如何干的

官方文档

声明式
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。

以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

组件化
构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。

由于组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并保持状态与 DOM 分离。

一次学习,随处编写
无论你现在使用什么技术栈,在无需重写现有代码的前提下,通过引入 React 来开发新功能。

React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用

4干的怎么样

优点

强大的开发团队和社区

一次学习,随处编写

Api简洁

1:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。 2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。

4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。

5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。

缺点

没有官方系统的解决方案,需要我们自己选型配置,比如redux pubsub等

 

 

下面是vue

1是什么

一套用于构建用户界面的渐进式框架

2能干什么

和其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动

3怎么干的

数据驱动视图

组件化

4优缺点

Vue是一款轻巧,可组件化的MVVM库,同时非常容易上手。 优点

缺点

1、vue直接的框架不可以做seo,如果要做的话需要预渲染或服务器端渲染。

 2.内存,虚拟DOM需要在内存中的维护一份DOM的副本。在DOM更新速度和使用内存空间之间取得平衡

 

当然世界上也是没有十全十美的事情

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56eD5aS05LqM6KGo5ZOl,size_20,color_FFFFFF,t_70,g_se,x_16

 接下来我们说下三大框架的对比

React 和 Vue 有许多相似之处,它们都有:

使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

 

特别赞助商

教程 

基础

安装

介绍

Vue 实例

模板语法

计算属性和侦听器

Class 与 Style 绑定

条件渲染

列表渲染

事件处理

表单输入绑定

组件基础

深入了解组件

组件注册

Prop

自定义事件

插槽

动态组件 & 异步组件

处理边界情况

过渡 & 动画

进入/离开 & 列表过渡

状态过渡

可复用性 & 组合

混入

自定义指令

渲染函数 & JSX

插件

过滤器

工具

单文件组件

测试

TypeScript 支持

生产环境部署

规模化

路由

状态管理

服务端渲染

安全

内在

深入响应式原理

迁移

从 Vue 1.x 迁移

从 Vue Router 0.7.x 迁移

从 Vuex 0.6.x 迁移到 1.0

更多

对比其他框架

React

运行时性能

HTML & CSS

规模

原生渲染

MobX

Preact 和其它类 React 库

AngularJS

复杂性

灵活性和模块化

数据绑定

指令与组件

运行时性能

Angular

TypeScript

运行时性能

体积

灵活性

学习曲线

Ember

Knockout

Polymer

Riot

加入 Vue.js 社区

认识团队

您在浏览的是 v2.x 及更早版本的文档。v3.x 的文档在这里。

 

对比其他框架

这个页面无疑是最难编写的,但我们认为它也是非常重要的。或许你曾遇到了一些问题并且已经用其他的框架解决了。你来这里的目的是看看 Vue 是否有更好的解决方案。这也是我们在此想要回答的。

 

客观来说,作为核心团队成员,显然我们会更偏爱 Vue,认为对于某些问题来讲用 Vue 解决会更好。如果没有这点信念,我们也就不会整天为此忙活了。但是在此,我们想尽可能地公平和准确地来描述一切。其他的框架也有显著的优点,例如 React 庞大的生态系统,或者像是 Knockout 对浏览器的支持覆盖到了 IE6。我们会尝试着把这些内容全部列出来。

 

我们也希望得到你的帮助,来使文档保持最新状态,因为 JavaScript 的世界进步的太快。如果你注意到一个不准确或似乎不太正确的地方,请提交问题让我们知道。

 

React

React 和 Vue 有许多相似之处,它们都有:

 

使用 Virtual DOM

提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

由于有着众多的相似处,我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性,同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方,比如更丰富的生态系统。

 

下列部分章节会略微有些过时,因为最近 React 16+ 的发布,我们计划在不久的将来和 React 社区一起重写这部分内容。

 

运行时性能

React 和 Vue 都是非常快的,所以速度并不是在它们之中做选择的决定性因素。对于具体的数据表现,可以移步这个第三方 benchmark,它专注于渲染/更新非常简单的组件树的真实性能。

 

优化方面

在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。

如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。

然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。

在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate,并且没有上述的子树问题限制。

Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身

TML & CSS方面


特别赞助商



教程 
基础
安装
介绍
Vue 实例
模板语法
计算属性和侦听器
Class 与 Style 绑定
条件渲染
列表渲染
事件处理
表单输入绑定
组件基础
深入了解组件
组件注册
Prop
自定义事件
插槽
动态组件 & 异步组件
处理边界情况
过渡 & 动画
进入/离开 & 列表过渡
状态过渡
可复用性 & 组合
混入
自定义指令
渲染函数 & JSX
插件
过滤器
工具
单文件组件
测试
TypeScript 支持
生产环境部署
规模化
路由
状态管理
服务端渲染
安全
内在
深入响应式原理
迁移
从 Vue 1.x 迁移
从 Vue Router 0.7.x 迁移
从 Vuex 0.6.x 迁移到 1.0
更多
对比其他框架
React
运行时性能
HTML & CSS
规模
原生渲染
MobX
Preact 和其它类 React 库
AngularJS
复杂性
灵活性和模块化
数据绑定
指令与组件
运行时性能
Angular
TypeScript
运行时性能
体积
灵活性
学习曲线
Ember
Knockout
Polymer
Riot
加入 Vue.js 社区
认识团队
您在浏览的是 v2.x 及更早版本的文档。v3.x 的文档在这里。

对比其他框架
这个页面无疑是最难编写的,但我们认为它也是非常重要的。或许你曾遇到了一些问题并且已经用其他的框架解决了。你来这里的目的是看看 Vue 是否有更好的解决方案。这也是我们在此想要回答的。

客观来说,作为核心团队成员,显然我们会更偏爱 Vue,认为对于某些问题来讲用 Vue 解决会更好。如果没有这点信念,我们也就不会整天为此忙活了。但是在此,我们想尽可能地公平和准确地来描述一切。其他的框架也有显著的优点,例如 React 庞大的生态系统,或者像是 Knockout 对浏览器的支持覆盖到了 IE6。我们会尝试着把这些内容全部列出来。

我们也希望得到你的帮助,来使文档保持最新状态,因为 JavaScript 的世界进步的太快。如果你注意到一个不准确或似乎不太正确的地方,请提交问题让我们知道。

React
React 和 Vue 有许多相似之处,它们都有:

使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。
由于有着众多的相似处,我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性,同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方,比如更丰富的生态系统。

下列部分章节会略微有些过时,因为最近 React 16+ 的发布,我们计划在不久的将来和 React 社区一起重写这部分内容。

运行时性能
React 和 Vue 都是非常快的,所以速度并不是在它们之中做选择的决定性因素。对于具体的数据表现,可以移步这个第三方 benchmark,它专注于渲染/更新非常简单的组件树的真实性能。

优化
在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。

如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。

然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。

在 Vue 应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate,并且没有上述的子树问题限制。

Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。

HTML & CSS
在 React 中,一切都是 JavaScript。HTML 可以用 JSX 来表达

Vue 的整体思想是拥抱经典的 Web 技术,并在其上进行扩展。

JSX vs Templates
在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。

使用 JSX 的渲染函数有下面这些优势:

你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。

 Vue 模板一些特有的优势:

模板比起 JSX 读写起来更自然

基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。

这也使得设计师和新人开发者更容易理解和参与到项目中。

组件作用域内的 CSS
除非你把组件分布在多个文件上 (例如 CSS Modules),CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components 和 emotion)。这引入了一个新的面向组件的样式范例,它和普通的 CSS 撰写过程是有区别的。另外,虽然在构建时将 CSS 提取到一个单独的样式表是支持的,但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时,也需要权衡 bundle 的尺寸和运行时的开销。

如果你是一个 CSS-in-JS 的爱好者,许多主流的 CSS-in-JS 库也都支持 Vue (比如 styled-components-vue 和 vue-emotion)。这里 React 和 Vue 主要的区别是,Vue 设置样式的默认方法是单文件组件里类似 style 的标签。

单文件组件让你可以在同一个文件里完全控制 CSS,将其作为组件代码的一部分。


这个可选 scoped attribute 会自动添加一个唯一的 attribute (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

最后,Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader,你可以使用任意预处理器、后处理器,甚至深度集成 CSS Modules——全部都在