一、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个技巧》。内容比较详实,对各个知识点的讲解也十分到位。
有需要的小伙伴,可以点击下方卡片领取,无偿分享
|