vue和react对比，next.js的优劣，electron的用法

react和vue异同

对比

	vue3	react
样式	id+class	css-js
组件	组合式API	函数式组件
全局组件通信	emit总线	context+useReducer
父传子参数	defineProps	prop
父传子内容	slot	child
数据绑定	双向数据绑定v-model	单向绑定useEffect、不渲染值useRef
响应式原理及更新策略	虚拟dom+局部订阅	虚拟dom+全量diff
重新渲染逻辑	改变key/prop、v-if重载、forceUpdate	改变hook/prop、if重载、forceUpdate
状态管理与声明周期	ref和reactive	hook函数
渲染模式	单页应用，声明式渲染	同左

概念

渲染

声明式渲染：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关心。数据驱动视图。
命令式渲染: 通常意味着手动操作 DOM，告诉程序如何去做。如input组件。

应用

单页应用：是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，首先加载单个页面，然后动态加载资源并添加到页面。vue、react都只有一个根节点dom。

虚拟dom

react和vue的组件内部的数据变化，通过虚拟DOM去更新页面。而两者的虚拟dom，除了更新策略不一样外，其他没有大区别。
在更新策略上，react采用自顶向下的全量diff，vue是局部订阅的模式。
react和vue一样，只解决同层的diff，不解决如p标签和div标签等跨层diff。
具体方法参考：浅析react和vue中的diff策略

react

1、介绍
React：一个开源MVC前端JavaScript库，也是一个创建单页应用的Web应用框架。

特点： 1、单向数据绑定。2、函数式组件

react应用实现流程：

1. 编写函数式组件
2. 组件被编译成虚拟dom节点，即json对象
3. 将虚拟dom节点编译成真实dom，并挂载到界面

单向数据绑定

react提倡单项数据绑定，如在hook函数中，使用useState保存数据，在视图层里使用，在函数里修改值。

函数式组件

一个返回React元素的函数被称为函数组件。
react hooks是react推出的钩子函数，用来进行管理函数状态和生命周期，同时也实现了逻辑代码的复用。

特点：
函数组件从上至下运行，一旦返回就无法保持活动状态。
被称为无状态组件，因为它们只负责UI渲染。
使用hooks管理状态和生命周期。

vue

介绍
Vue.js是一个用于创建用户界面的开源MVVM前端JavaScript框架，也是一个创建单页应用的Web应用框架。

特点： 1、响应式的数据绑定(双向)。2、组合式API

双向数据绑定

组件内vue通过v-model提供双向数据绑定，v-model 是通过监听 DOM 事件实现的语法糖。

组件之间的通信采用单向数据流是为了组件间更好的解耦，vue不推荐子组件修改父组件的数据。

Composition API(组合式API)

组合式API围绕组件选项setup 而创建，setup 为 Vue 组件提供了状态、计算值、侦听器 和生命周期钩子，Vue 的响应性系统与组件层是解耦的，状态管理使用的是响应式对象ref()、reactive()。

ref	reactive
封装一个Reflmpl类,返回响应式Ref对象	返回Proxy响应式代理对象
用于处理单值	用于处理对象类型
返回的数据在JS中使用需要加上.value ，在视图中使用则不用	使用展开运算符(…)展开会失去响应性，可以结合toRefs()将值转换为Ref对象之后再展开

toRef、toRefs 是延续引用类型响应式对象的方法
只不过 toRef 延续单个响应式对象的属性,而 toRefs 延续响应式对象的全部属性

MVVM

MVVM是Model-View-ViewModel,是把一个系统分为了模型、视图和视图模型三个部分。vue是一个典型的MVVM思想，数据驱动视图。

Model：数据层，仅仅关注数据本身，不关心任何行为。对应接口数据。
View：视图层，用户操作页面，当view-model对model更新的时候，会通过数据绑定更新到view。
对应vue组件中的template和style的部分。
ViewModel：业务逻辑层。前端从后端获取的数据进行转换处理。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层。
对应typescript函数。

vue在MVVM思想下，view和model没有直接联系，但是view和view-model、model和view-model之间是会交互的。当view视图进行dom操作等使数据发生变化时，可以通过view-model同步到model中，同样的model数据变化也会同步到vue中。
MVVM是真正的事件驱动编程。

Next.js

概念

Next.js 是一个基于 React 的后端框架。

我们在 React 中能做的一切，在 Next.js 中也能做,还有一些额外的功能，如路由、API 调用、认证等等。我们在 React 中没有这些功能。相反，我们必须安装一些外部库和依赖项。例如，React Router 用于单页 React 应用程序的路由。

特点

next是服务端渲染（SSR），而react是客户端渲染（CSR），这是他们的本质区别。
ps:vue是客户端渲染，与nuxt相对应

服务器端渲染：用户在屏幕上看到的界面不是由浏览器生成的，而是在服务器上预先生成的。
SSR的特点，使得应用程序非常适合搜索引擎爬取数据，提高网站搜索权重，这也是大部分人选择它的原因。

缺点

不适合做交互多，多次动态渲染的应用，如 Netflix 或 Youtube

electron

概念

Electron是GitHub开发的一个开源框架。它通过使用Node.js和Chromium的渲染引擎完成跨平台的桌面GUI应用程序的开发。electron是一个程序库，是可重用的代码，我们只需要使用它并在它基础上建立你的项目。

用途

跨平台开发。通常情况下，我们构造不同的操作系统的桌面应用就需要通过其原生编程语言实现。而使用electron可以一步到位，而且可以使用web编程语言编写。

特点

可以使用Node自带的完整API和所有通过 npm 安装的软件包。

重要模块

流程模型

Electron 继承了来自 Chromium 的多进程架构，这使得此框架在架构上非常相似于一个现代的网页浏览器。
Electron主要包括主进程、渲染进程、预渲染进程(预加载脚本)，主进程和渲染进程环境不同，可使用的node api也不同。

主进程

Electron 有一个单一的主进程，作为应用程序的入口点。
Electron 的主进程是一个拥有着完全操作系统访问权限的 Node.js 环境。
主进程相当于浏览器，会管理渲染进程。

渲染进程

Electron 会为每个打开的窗口生成一个单独的渲染器进程，渲染器负责渲染网页内容。
出于安全原因，渲染进程默认跑在网页页面上，而并非 Node.js里。
渲染进程相当于标签页。

预加载脚本

预加载脚本运行在有限访问权限的环境中。
为了将 Electron 的不同类型的进程桥接在一起，我们需要用到预加载脚本。
预加载脚本像 Chrome 扩展的内容脚本一样，会在渲染器的网页加载之前注入。

渲染进程、窗口、index.html之间的关系

主进程中new BrowserWindow()会开启一个系统窗口，但不会开启一个独立的进程，窗口由主进程管理。
窗口可以loadURL加载一个页面，此时会开启这个页面的渲染进程。
当loadURL加载一个index.html文件的时候，此时渲染进程里运行的就是这个index.html的内容。

进程之间的通信

1. 使用ipc管道通信。主要用到了ipcMain和ipcRenderer，分别代表了主进程和渲染进程的收发消息的方法，可以同步也可以异步。
2. 使用remote模块。remote底层是通过ipc管道实现的，可以在electron项目中进行全局的数据管理。但官方并不推荐此方法，remote会带来很多问题。一是跨进程的创建使用对象都会导致性能损耗（运行慢）；二是会制造混乱，渲染进程调用主进程的对象时，可能会导致主进程再通知另一个渲染进程去执行事件，这是毫无意义的；三是安全问题，加载第三方网页时，恶意代码可能会模拟remote发送远程事件消息。