一、Vue 初识
1.1 Vue的定义
Vue 是一套用于构建用户界面的渐进式框架。
渐进式的定义：
渐进式指的是你可以在Vue核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。也就是说，我们不必一次性接受并使用它的全部功能特性，后续可以根据自己需要进行相应功能特性的使用。
1.2 Vue 的特点
1. 遵循MVVM模式 ；
MVVM是 Model-View-ViewModel 的缩写，即 _**模型-视图-视图模型**_。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互。vue 通过双向数据绑定把 View 和 Model 连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑即可。
2. 声明式渲染；
不需要直接去控制dom，你只要把数据操作好，vue自己会去进行视图层的数据更新，可以节省很多操作dom的代码。
3. 组件化应用；
Vue允许我们使用小型、独立和通常可复用的组件构建大型应用，提高代码复用率、让代码易于维护；
4. 虚拟DOM；
实质是一个JavaScript对象，vue会通过diff算法比对新旧vdom树，记录有变化的部分，并最后再将**变化的部分**同步到DOM中（不需要整个DOM树重新渲染）。
1.3 Vue 周边生态
1.vite : 被称为下一代前端开发与构建工具，极大地改善了前端的开发体验，特点就是快；2.vue-cli : 快速搭建基于 webpack 的 Vue 项目的开发者工具，目前官方更推荐使用；3.vue.js devtools : 用于调试 Vue.js 项目的浏览器 devtools 扩展插件；4.vue-resource : Vue.js 插件，提供了使用 XMLHttpRequest 或 JSONP 发出 Web 请求和处理响应的服务；5.vue-router：Vue2 的官方前端路由解决方案；6.vuex : Vue 官方的状态管理器，分别在 v3 和 v4 两个大版本支持 Vue2 和 Vue3；7.pinia: 又一个官方的 Vue 状态管理器，比 Vuex 更轻量，基于 Vue 的组合式 API（composition API），同时支持 Vue2 和 3，被认为是下一代的 Vuex；8.vuedraggable : 基于 Sortable.js 的 Vue 拖拽组件；9.mint-ui：基于 vue 的 UI 组件库（移动端）；10.element-ui：基于 vue 的 UI 组件库（PC 端）；1.4 helloVueWorld
这一par我们先来试着写下第一行Vue代码 “helloVueWorld”。 中间先不要关心为什么这么写，后续的文章后进行详细说明介绍。
1.4.1 前置知识
使用Vue之前我们需要大致了解几个前置知识：
1.Vue是通过Vue实例对容器内容进行操作的，所以我们要 new 一个Vue的实例并传入一些vue的配置项；
2.在body里创建一个id为root的div容器，此容器内的语法符合html语法规范，除此之外，我们可以在此容器内利用vue语法进行相关功能逻辑的开发；
3.Vue 实例与容器是一一对应的关系，并且在实际开发中，只会有一个Vue实例；
4.我们在容器中想要使用Vue实例中的数据，可以使用差值语法： {{xxx}} （这里的 xxx 要写 js 表达式）或者 指令语法：v-xxx （这里的xxx可以是 bind/model/on …） 来操作Vue实例里相关的数据。 差值语法和指令语法后续会详细说明；
5.由于Vue的双向数据绑定，Vue实例中的data数据发生变化，视图中显示它的地方也会进行一个变化（并不严谨，后续vue的数据监听处再进行详细阐述）；
1.4.2 引入Vue
引入Vue 有 三种方法：
① 直接下载并本地引入，Vue 会被注册为一个全局变量。
② CDN引入。
③ 利用vue-cli 脚手架进行生成Vue项目
vue create my-vue-project
1.4.3 代码部分(注意看注释)
为使用方便，我在此处通过CDN来引入Vue。
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>初识Vue</title><<img src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script></head><body><!--2. 准备好一个承接vue实例控制的容器 --><div id="demo"><!--4. 利用差值语法，在容器内获取vue实例上的数据并展示 --><h1>{{ printData }}</h1></div><script type="text/javascript" > // 1. 创建Vue实例new Vue({el: '#demo', // el属性用于指定当前Vue实例对哪个容器进行操作data: { // 3. data中用于存储数据，数据供el所指定的容器去使用printData: 'hello-vue-world'}}) </script></body" style="margin: auto" />
</html>
二、React 初识
2.1 React的定义
React 是一套用于构建用户界面的渐进式框架，由Facebook团队开发并维护。
2.2 React 的特点
1、声明式设计
**声明式编程**是目前整个大前端开发的模式:Vue、React、Flutter、Swift；
它允许我们**只需要维护自己的状态**,当状态改变时,React可以根据最新的状态去渲染我们的UI界面。不需要直接去控制dom，你只要把数据操作好，react自己会去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发；
2、使用JSX语法
**JSX** 是 JavaScript **语法的扩展**。React 开发大部分使用 JSX 语法（在JSX中可以将HTML于JS混写）；
3、使用虚拟DOM、高效
**虚拟DOM**其实质是一个JavaScript对象，当**数据**和**状态**发生了变化，**都会被自动高效的同步到虚拟DOM中，** 最后再将**仅变化的部分**同步到DOM中（不需要整个DOM树重新渲染）。
4、组件化开发
通过 React 构建组件，将复杂界面拆分成一个个小的组件，使得代码更加容易得到复用和维护，能够很好的应用在大项目的开发中。
5、单向数据流
react是**单向数据流**，父组件传递给子组件的数据，子组件能够使用，但是不能直接通过this.props修改。 这样让数据清晰代码容易维护。
2.3 React 周边生态
1.create-react-app : 快速搭建基于 webpack 的 React 项目的脚手架。2.React.js devtools : 用于调试 React.js 项目的浏览器 devtools 扩展插件。3.react-router：React 的官方前端路由解决方案。4.Redux : 是 JavaScript 应用程序的可预测状态管理容器。5.redux-thunk : redux的中间件。6.react-dnd： React 的拖拽库。7.React-Hook-Form : 用于表单状态管理和验证的第三方表单库。8.antd：企业级 UI 设计语言和 React UI 库.2.4 helloReactWorld
同样的，这一par我们分别用React的类写法和函数写法来写下第一行React代码 “helloReactWorld”。
1.4.1 前置知识
使用React之前我们也需要了解几个前置知识：
1.React是通过ReactDom.render() 将我们要渲染的内容渲染到挂载对象上去的。（补充：ReactDOM.render的一个参数是要渲染的内容，第二个参数是挂载的对象）。2.我们在开发React项目时用的是JSX语法，需要注意的是 JSX只是Js的一种语法拓展，其最终也是经babel转成js代码。 并且，JSX并不是React的专属，在Vue里也可以使用JSX语法。3.类写法和函数写法都需要 return 出我们想要渲染的内容。不同的是，类写法的是在render函数中返回的；而函数式写法直接return。4.我们在return出去的JSX里可以用{ ××× } 的形式来获取react里的数据。5.React并不主动的去进行双向数据绑定，react视图层的更新条件是 组件的 props 或者 state 进行了改变。### 1.4.2 引入React
使用React 必须要引入三个依赖：
1. react: 包含react所必须的核心代码；
2. react-dom: react渲染在不同平台所需要的核心代码；
3. babel: 将jsx转换成 React 代码的工具；
看到这里，肯定很多人会有疑惑：我们在用Vue时直接引入一个vue.js 即可，为什么React需要依赖三个库？
解释：React引入的这三个库是各司其职的,目前就是让每个库单纯做自己的事情。> (1) react包中是涵盖了react和 react-native所共同拥有的核心代码。> (2) react-dom 里则是针对web和native完成不同的事情：在web端会 jsx 最终渲染成真实的DOM 显示在浏览器中；而在native端则会将 jsx 最终渲染成原生的控件 (比如Android中的Button,IOS中的UButton)> (3) babel则是将我们写的JSX语法转换成浏览器支持的Es5。
引入方式：
① 下载后，在本地引入
<script src="../react/react.development.js"></script><script src="../react/react-dom.development.js"></script><script src="../react/babel.min.js"></script>
② CDN引入。
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
这是在开发环境进行引入的未压缩的， @18代表当前react的版本号
③ 利用 creat-react-app 脚手架进行生成react项目
creat-react-appmy-react-project
1.4.3 代码部分（注意看注释）
类写法版：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><<img src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- 2. 注意事项: 我们希望jsx的代码被解析,就要在script标签里加type属性并赋值 'text/babel'--><script type="text/babel"> // 封装App组件class App extends React.Component {constructor() {super(); <!-- 3. 设置state数据-->this.state = {message: "Hello React World"}}render() {return (/ jsx使用规则： 必须只能有一个根节点；<div> <!-- 4. 展示state数据-->{this.state.message}</div>)}}// 渲染组件,ReactDOM.render的一个参数是要渲染的内容，第二个参数是挂载的对象ReactDOM.render(<App/>, document.getElementById("app")); </script" style="margin: auto" />
</body>
</html>
函数式写法：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><<img src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- 2. 注意事项: 我们希望jsx的代码被解析,就要在script标签里加type属性并赋值 'text/babel'--><script type="text/babel"> // 函数式写法封装App组件 function App (props){ <!-- 3. 设置state数据-->const [message,]= React.useState('Hello React World')return (<div> <!-- 4. 展示state数据-->{message}</div> )}// 渲染组件,ReactDOM.render的一个参数是要渲染的内容，第二个参数是挂载的对象ReactDOM.render(<App/>, document.getElementById("app")); </script" style="margin: auto" />
</body>
</html>
三、对比总结
1、怎么和容器进行联系：
Vue 通过全局的vue实例来对容器内容进行操作；而React则是通过ReactDOM.render方法将我们的渲染内容挂载目标对象上从而来进行一些逻辑操作。
2、 更新视图差别：
Vue的双向数据绑定会自动监听data数据变化，并且会根据变化来进行相应视图层面的更新；而React中只有在props和state发生变化时，才会触发rerender，从而进行视图层的更新。
3、 引入依赖的差别：
Vue 中我们只需要引入vue 这一个依赖库即可；而在React中我们需要引入 react、 react-dom 、babel 三个依赖库。
4、react类写法和函数写法的不同：
React中的类写法我们是在render函数中进行return出我们要渲染的内容，并且类中我们需要关注this的指向问题； 而React的函数写法则是直接return，并且由于其并无实例，所以我们不需要关注this指向。
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享