最后
由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】
提前体验Vue3新特性
-
一、Vue3的亮点
-
- (1)Performance
-
(2)Tree shaking support
-
(3)Better TypeScript support
-
(4) Composition API
-
(5) Custom Renderer API
-
(6) Fragment
-
二、Vue3的性能
-
三、升级Vue3
-
- (1)创建Vue2项目
-
(2)将Vue2升级成Vue3
-
四、体验Vue3新特性
-
五、结束语
==================================================================
在体验Vue3之前,我们先来了解一下Vu3到底有哪些亮点之处
总共有6大两点:
-
Performance(性能比vue2的runtime快2倍左右)
-
Tree shaking support(按需打包模块)
-
Better TypeScript support(更好的TS代码支持)
-
Composition API(组合API)
-
Custom Renderer API(自定义渲染API)
-
Fragment, Teleport, Suspense
在原本的Vue2中,每次DOM某个地方需要更新都需要遍历整个虚拟DOM,然后判断哪个地方需要进行更新,然后再重新渲染。而Vue3选择了一种新的渲染策略,即采用某些方式使得每次需要更新DOM时,无需遍历整个虚拟DOM树就可以检测到改变而进行DOM更新。
这个就时为了实现按需打包,我们知道Vue框架里有很多的API和模块,但是一个项目中不可能用到所有的API和模块,所以该功能就可以实现在打包时去除掉Vue中没有被用到的模块和API,使得整个项目大小大幅度减小。
根据官方的说法,Vue3如果只写入了一个 Hello World
,即没有用到任何的模块API,打包后的大小大约为 13.5kb
;若用到了所有的Vue3所有的模块,打包后的大小也就只有大约 22.5kb
;而Vue2若只写入了 Hello World
,并没有用到任何的模块API,打包后的大小大约为 32kb
左右,这就是因为Vue2中没有 Tree shaking
的原因。
从中可以看出,Vue3比Vue2更轻量。
为了更好的用户使用,Vue3使用了TS重新对Vue框架进行了重写,增加了对TS更好的支持。
Composition API
是为了解决原本Vue项目中代码逻辑分散而导致不易维护的问题
首先先来看一个图
这幅图里颜色相同的区域表示的是实现同一个功能的代码区域
图中左侧的是Vue2的一个API,叫做 Options
,就是我们代码中的 data
、methods
、mounted
……这些存储数据或方法的对象
我们都知道,在大的项目中,我们要实现一个组件的完整功能,需要上百甚至上千行代码。例如,我们要做一个轮播图组件,现在把图中左侧这一列图像看成是轮播图组件的代码,假设这里有1000行代码。
首先我们在 methods
里写了实现轮播功能的方法,然后在 mounted
里写上在进入页面时自动开启轮播功能的代码,此时又想起来应该加一个功能,在鼠标移入该组件时应暂停轮播,所以又在 methods
里新增了一个方法,如图
这时你就会有这种感受,仅仅为了实现一个轮播的功能,却在这个页面中的不同地方写了不同的代码,那这样维护起来就特别的麻烦了,假设你的轮播功能出bug了,你需要排查问题,这时你先检查 实现轮播功能的代码
有无问题,然后又往下翻几百行代码找到 鼠标移入暂停轮播的代码
,检查一下是否有问题,再又往下翻几百行代码找到 进入页面开启轮播的代码
是否又问题。最终一顿分析才能查出bug。
这样一来,代码逻辑在页面中比较分散,很难维护,所以Vue3舍弃了这种 Options API
,而换用 Composition API
,也就是图中右侧的部分。
我们来看一下,刚才举的例子如果换用 Composition API
会时什么样
所有实现轮播这一功能的代码都放在一起,也就自然方便了维护
Custom Renderer API
也算是Vue3一个很不错的亮点了,它的作用就是将我们的代码绘制到 canvas
画布上
Vue3实现了不再限于模板中的单个根节点
在Vue2中大家应该遇到过这样的情况
这个报错的原因是因为,Vue2要求组件模板中只能有一个根节点,而不可以有多个根节点,如图
图中这种情况就是有两个根节点,所以会报错。所以我们可以通过给这两个标签外部加一个节点来解决报错问题,如图
这样就不会在报错了,但有时会觉得这样特别麻烦,所以Vue3解决这个报错问题,实现了模板中不限于单个根节点,即即使有多个根节点也不会报错
==================================================================
在Vue3中,重写了虚拟dom的实现,并且针对编译模板进行了优化。
在上面我们讲到了,在Vue2中,每次更新dom都需要重新遍历整个虚拟dom树,检测到变化点再去做相应的更新。但是Vue3在每次更新dom时就不需要遍历整个虚拟dom树了,这是为什么呢?
这里先放上两个网址,分别可以查看到Vue2和Vue3的模板编译是如何的:
-
Vue2-template:https://template-explorer.vuejs.org/#%3Cdiv%20id%3D%22app%22%3E%0A%20%20%7B%7B%20msg%20%7D%7D%0A%3C%2Fdiv%3E
Vue的渲染过程是先将html模板生成一个 render
函数,然后再根据该 render
函数进行渲染的,我们首先来看一下Vue2的模板编译情况
图中左侧部分就是我们平时写的html模板,右侧部分则是该html模板编译后生成的 render
函数
接下来我们再来看一下Vue3的模板编译情况是如何的
很明显的可以看到,对比Vue2的 render
函数,在图中的第7行代码中多出了一个数字 1
和 /* TEXT */
,这是针对html模板打上了一个标记,告诉程序这个位置的数据是动态的(html模板中的{{ msg }}
是可能会改变的,是一个动态的数据),所以之后如果要更新dom,就会针对打上标记的位置进行遍历检测。
现在我们再在html模板上写上一个静态的数据,看看它是如何编译模板的
我们可以看到,我先给最外部的 div
加上了一个动态的 class
属性,即:class="isShow"
,所以编译后的 render
函数中的第11行代码中,有一个数字 9
、 注释 /* TEXT, PROPS */
以及 ["class"]
,表示html模板该处的 text
文本部分是动态的,属性 class
也是动态的,所以在后面更新dom时,会对该处的这两个值进行遍历检测;另外我们给属性name
赋值了 box
,该值是一个静态固定的值,所以在图中右侧的 render
函数中我们并没有看到对其有任何的标记,所以在之后更新dom时,会自动忽略该处的值。
这就是Vue3通过标记来追踪动态数据的绑定,从而节约遍历虚拟dom的大部分开学。
结合官方的说法,Vue3比Vue2的页面渲染速度提升了1.3倍2倍,SSR(服务器渲染)速度提高了2倍3倍
这里放上两者性能的对比图
=================================================================
虽然目前为止Vue3还未正式发布,但我们已经可以提前体验Vue3了,为了更好地进行版本的迭代更新,Vue3对Vue2进行了很大程度的兼容,并且还提供了一个版本升级工具,可以将原本的Vue2项目很好的升级到Vu3。接下来我给大家介绍一下升级Vue3的步骤
我们先通过 vue-cli
脚手架的 vue create 项目名
来创建一个 vue2项目,这里建议大家在创建时把 vue-router
和 vuex
一并安装上,因为等会在升级时,会把这两个一并升级,因此代码会有所变化。
那么我们现在只需要在原来的 vue项目目录下通过命令 vue add vue-next
来将Vue2升级成Vue3
在升级之前,我先记录一下几个文件的代码,可以方便我们看看升级前和升级后的差别
- Vue2的
main.js
文件
- Vue2的
vue-router
的index.js
文件
- Vue2的
vuex
的index.js
文件
稍微等待一下,Vue3就升级成功了,结果如图
那么此时我们来看看升级后的Vue文件有哪些变化
- Vue3的
main.js
文件
- Vue3的
vue-router
的index.js
文件
- Vue3的
vuex
的index.js
文件
对比一下各个文件升级前和升级后的区别,我们可以很明显地看到:
Vue2的文件中都是 import Vue from 'vue'
导入了整个Vue,也就是把所有的模块API都导入了,但是用到的API可能就那么几个,所以这非常影响性能
Vue3的文件都是将用到的Vue中的模块API单独地导出,而不是导入整个Vue,类似图中的 import { createApp } from 'vue'
,这样就跟吃自助时吃多少拿多少的道理一样,非常得节省代码性能的消耗。
到这里,Vue3就算已经升级成功了,接下来我们就来体验一下Vue3的一些新特性把。
====================================================================
这里主要是来体验一下 Composition API
的,首先了解一下 Composition API
新特性的入口—— setup()
函数,该函数是为组件提供的新属性。
最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
函数是为组件提供的新属性。
最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-cR4WcEjD-1715765161228)]