国内目前最火的两个前端框架：Vue(2/3)、React(16/18)
- 共同的特点
改变了传统的前端开发模式[操作DOM]
@1 容易引发DOM的回流和重绘，消耗性能
@2 我们需要处理的逻辑和编写的代码相比较是复杂的
@3 在当前工程化和组件化开发的大环境下，传统的开发模式，需要手动完成Webpack配置、组件的处理、SPA单页面应用下的路由模式、或者公共信息的管理等
@4 ...
Vue/React框架，都采用"数据驱动视图渲染"的机制，让开发者放弃直接操作DOM。转而去操作数据，只要把数据改变，视图会自动进行刷新，从而实现想要的效果！！
- 如何使用Vue和React
从整体思想上，就要去做改变和适应
@1 视图中但凡有需要改变的，我们都能构建出数据模型 Model
-
状态 state
-
属性 props
-
...
@2 基于数据去构建视图[学习视图和构建的语法]
-
React:JSX语法
-
Vue:Template和JSX语法
-
视图编译的流程：先创建虚拟DOM(VirtualDOM 框架自己定义的一个对象)->DOM-DIFF对比->渲染真实的DOM(原生DOM对象或页面中看到的DOM节点)
@3 以后但凡想让视图变化，都去修改数据即可，视图会重新编译
@4 框架也提供了直接操作DOM的方式，ref[但是不建议这样使用]
- React是MVC框架 Vue是MVVM框架
MVVM[Model、view、ViewModel]:Vue主要实现了ViewModel层，实现了"双向驱动"
+M-V：数据驱动视图渲染（M控制V）
+V-M: 视图中信息的变化(一般指表单中内容的变化),会自动去更改对应的数据（V控制M）MVC[Model、View、Controller]:React帮助我们提供一些特点的方法，实现单向驱动
+M-V: 数据驱动视图的渲染(基于react提供的方法[例如：setState、forceUpdate、一些Hook函数等]，去修改数据，会告知视图重新渲染)
+V-M：React内部没有实现自动"视图渲染数据"。需要开发者手动去处理(给元素做事件绑定和监听，当内容变化时，手动去修改数据)
- Vue/React框架、除了框架本身以外，都有一套完善的生态体系
@1 脚手架(可以快速创建基于webpack/rollup..等构建的工程化项目)
React:create-react-app、...
Vue:@vue/cli、...
@2 框架本身有一套完善的组件化开发体系
Vue:SFC单文件组件[视图、逻辑和数据、样式及私有化]
React:".jsx"组件创建方式[视图、逻辑和数据、样式及私有化需要额外的处理]
组件的分类：
-
函数组件[包含Hooks组件]、类组件
-
全局组件、局部组件（Vue基本）
常用的组件：
-
普通业务组件
-
通用业务组件:复用性高的业务组件
-
通用的功能组件：UI组件库中的，我们可能结合业务需求进行二次封装
Vue:ElementUI、Antd of Vue、 iview、vant、cubeUI..
React:Antd、AntdMobile...
@3 对于SPA单页面应用的路由机制，框架也提供好了
Vue:vue-router
React：react-router-dom 5/6版本
@4 对于公共信息的管理，框架也有现成的体系
Vue:vuex、pinia
React:redue (redux、react-redux、redux-thunk、redux-promise、redux-logger、redux-saga、@reduxjs/toolkit)、Mobx、Dva、Umi...
....
我们把以上东西，称之为：Vue/React全家桶
