共计 1680 个字符,预计需要花费 5 分钟才能阅读完成。
明天,葡萄带你理解如何基于 Vite+Vue3 实现一套纯前端在线表格零碎。
在正式开始我的项目介绍之前,首先咱们首先来介绍一下 Vite 和 Vue3。
Vue3
Vue 是什么?大多前端开发者对这个词已毫不生疏了。三大框架孰优孰劣,泛滥开发者畅所欲言,其中 Vue 以其“最简略、最易上手“的名号迅速积攒了一大批粉丝,被宽泛学习利用。
同 Angular、React 框架一样,Vue 也是 MVVM 类型的框架,即数据驱动视图,在开发时咱们只须要关注数据的变动即可。不同的是,Vue 是一个更轻量级的框架,被设计为自底向上逐层利用,其外围库只聚焦于视图层,通过尽可能简略的 API 实现了响应式数据绑定以及组合的视图组件。
Vue 曾经如此优良,为什么还须要 Vue3 呢?
这就要提到它的不足之处了,在之前的 Vue2 中,应用的是选项型 API(Options API),将代码宰割为不同的属性:data、computed、methods 等,这些办法属性各司其职。
选项型 API 诚然好学易上手,与此同时也带来了一个关键问题:代码凌乱,可读性差。
举个例子,当初咱们想做一个列表视图性能,那么须要在 data 中写上相干的变量,在 methods 中将相干的逻辑判断和后端交互也加上。这个时候,新需要来了:增加上搜寻和筛选性能。没有问题,持续将新的变量沉积在 data 中,将新的办法整顿在 methods 中……写代码一时爽,前期保护的程序员傻眼了,这一堆堆的办法,到底在讲个啥。
既然 Vue2 这个弊病曾经裸露进去了,天然要在它的升级版尝试解决了。所以 Vue3 推出了组合式 API(Composition API),正是为了解决本来 Vue2 我的项目中代码逻辑扩散、不易了解和保护的问题。它应用办法(function)进行代码宰割,使代码更为简洁易读。
既然做了,其余方面也不能落下啊!在性能下面,Vue3 也对 diff 算法进行了优化:
在 Vue2 中,每当数据发生变化,就会生成一个新的 DOM 树,并新 DOM 树与旧的 DOM 树进行比照,来判断节点异同,并进行更新。但残缺遍历过程须要将两棵树所有节点进行比拟,但理论状况中并不是所有节点内容都会变动,这就造成了性能的节约。
Vue3 新增了动态标记,仅对标记了的节点进行比照并进一步更新,无需再遍历整个节点,实现了性能晋升。
比照 Vue2,官网文档对 Vue 性能有具体的数据介绍:SSR 速度进步了 2~3 倍;Update 性能进步 1.3~2 倍。(程序员看到后更有信念学习了!)
除此之外,Vue 我的项目中也有泛滥 API 和模块,但在理论我的项目中咱们并不会用到所有的内容,Vue3 对此推出按需打包模块,能够大幅压缩打包后的内容体积。
依据官网比照示例,Vue2 中如果仅写了 Hello Word,未用到任何模块 API,打包后大小约为 32KB;而 Vue3 同理,打包后大小约为 13.5KB,能够显著看出降级后的 Vue3 相较于 Vue2 打包体积大幅减小。
与 Vue2 相比,Vue3 中生命周期函数也产生了变更,总结如下:
有须要的同学能够截图保留,以备不时之需。
说完了 Vue3,接下来咱们来看看 Vite 又有什么亮眼之处。
Vite
在 Vue3 正式公布之前,尤雨溪就提到做了一个新的前端构建工具 -Vite。其自己更是对 Vite 青睐有加,引得 Webpack 开发者直喊大哥。
Vite 到底有什么样的神奇作用呢?它做到了本地疾速开发启动:
- 不须要期待打包操作,疾速冷启动
- 即时的模块热更新
- 无需期待整个我的项目编译实现,做到真正的按需编译
在应用 Webpack 时,会经验剖析依赖 => 编译打包 => 交给开发服务器渲染 整个过程。也就是说,须要先打包,之后将打包后果提供给服务器进行加载。而随着模块的一直增多,打包的体积会越来越大,造成热更新速度显著拖慢。
而 Vite 间接略过了打包步骤,间接启动开发服务器,在申请具体的模块时再对该模块进行实时编译,大大提高了启动速度。
到这里咱们曾经具体为大家介绍了 Vue3 降级的亮眼性能和 Vite 的劣势,在下局部中咱们会以我的项目实例登程,为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格零碎。
感兴趣的小伙伴们不要错过~