react 和vue的理解

最新推荐文章于 2024-09-29 14:42:13 发布

秃头二表哥

最新推荐文章于 2024-09-29 14:42:13 发布

阅读量1.1k

点赞数

文章标签： javascript 前端面试 react.js

本文链接：https://blog.csdn.net/lb6514052/article/details/124790430

版权

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

对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库，同时非常容易上手。优点

丰富的指令，使开发效率大大提升
双向数据绑定
轻量级
插件化
天生scope css 缺点
生态相对react来讲没有那么庞大
灵活的副作用，在集合到大型项目中有时候会有一些问题

缺点

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 是否有更好的解决方案。这也是我们在此想要回答的。

React
React 和 Vue 有许多相似之处，它们都有：

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

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

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

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

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，将其作为组件代码的一部分。

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

规模
向上扩展
Vue 和 React 都提供了强大的路由来应对大型应用。React 社区在状态管理方面非常有创新精神 (比如 Flux、Redux)，而这些状态管理模式甚至 Redux 本身也可以非常容易的集成在 Vue 应用中。实际上，Vue 更进一步地采用了这种模式 (Vuex)，更加深入集成 Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。

两者另一个重要差异是，Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。

最后，Vue 提供了 CLI 脚手架，能让你通过交互式的脚手架引导非常容易地构建项目。你甚至可以使用它快速开发组件的原型。React 在这方面也提供了 create-react-app，但是现在还存在一些局限性：

它不允许在项目生成时进行任何配置，而 Vue CLI 运行于可升级的运行时依赖之上，该运行时可以通过插件进行扩展。
它只提供一个构建单页面应用的默认选项，而 Vue 提供了各种用途的模板。
它不能用用户自建的预设配置构建项目，这对企业环境下预先建立约定是特别有用的。
而要注意的是这些限制是故意设计的，这有它的优势。例如，如果你的项目需求非常简单，你就不需要自定义生成过程。你能把它作为一个依赖来更新。如果阅读更多关于不同的设计理念。

向下扩展
React 学习曲线陡峭，在你开始学 React 前，你需要知道 JSX 和 ES2015，因为许多示例用的是这些语法。你需要学习构建系统，虽然你在技术上可以用 Babel 来实时编译代码，但是这并不推荐用于生产环境。

就像 Vue 向上扩展好比 React 一样，Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页面就可以运行：

由于起步阶段不需学 JSX，ES2015 以及构建系统，所以开发者只需不到一天的时间阅读指南就可以建立简单的应用程序。

原生渲染
React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发，对开发者是非常棒的。相应地，Vue 和 Weex 会进行官方合作，Weex 是阿里巴巴发起的跨平台用户界面开发框架，同时也正在 Apache 基金会进行项目孵化，Weex 允许你使用 Vue 语法开发不仅仅可以运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用的组件。

在现在，Weex 还在积极发展，成熟度也不能和 React Native 相抗衡。但是，Weex 的发展是由世界上最大的电子商务企业的需求在驱动，Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。

另一个选择是 NativeScript-Vue，一个用 Vue.js 构建完全原生应用的 NativeScript 插件。

MobX
Mobx 在 React 社区很流行，实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上，React + Mobx 也可以被认为是更繁琐的 Vue，所以如果你习惯组合使用它们，那么选择 Vue 会更合理。

Preact 和其它类 React 库
类 React 的库们往往尽可能地与 React 共享 API 和生态。因此上述比较对它们来说也同样适用。它们和 React 的不同往往在于更小的生态。因为这些库无法 100% 兼容 React 生态中的全部，部分工具和辅助库也可能无法使用。或者即使看上去能工作，但也有可能随时发生不兼容，除非你用的这个类 React 库官方与 React 保持严格一致。

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