关于vue3:如何开发一款基于-ViteVue3-的在线Excel表格系统上

0次阅读

共计 1730 个字符，预计需要花费 5 分钟才能阅读完成。

明天，葡萄带你理解如何基于 Vite+Vue3 实现一套纯前端在线表格零碎。
在正式开始我的项目介绍之前，首先咱们首先来介绍一下 Vite 和 Vue3。

2020 年 09 月 18 日 Vue.js 3.0 公布，经验了两年工夫的对细节的一直优化与调整，终于在往年 2 月正式成为新的默认版本。其作者尤雨溪将 Vue3 的指标形容为：
1、更快
2、更小
3、更易于保护
4、原生指标更容易
5、开发更轻松
只看上述内容，你可能感触不到 Vue3 到底优化了什么。这里咱们将它和 Vue2 来比照一下，为大家具体阐明它的优越之处。

在官网文档中针对 Vue2 和 Vue3 之间的性能差别有具体的数据介绍：
1、SSR 速度进步了 2~3 倍
2、Update 性能进步 1.3~2 倍
其中性能晋升的重要一点是 Vue3 中对 diff 算法进行了优化。
在 Vue2 中，每当数据发生变化，就会生成一个新的 DOM 树，并新 DOM 树与旧的 DOM 树进行比照，来判断节点异同，并进行更新。但残缺遍历过程须要将两棵树所有节点进行比拟，但理论状况中并不是所有节点内容都会变动，这就造成了性能的节约。
Vue3 新增了动态标记，仅对标记了的节点进行比照并进一步更新，无需再遍历整个节点，实现了性能晋升。

Vue2 应用选项型 API（Options API），这种形式下将代码宰割为不同的属性：data、computed、methods 等，这些办法属性各司其职。
举个例子，当咱们想实现一个列表视图性能，须要在 data 中写此性能相干的数据，在 methods 中写相干的逻辑判断和后端交互办法等；如果还心愿有搜寻和筛选，或者更多的性能，那么逻辑关注点会越来越多，导致组件变得难以了解和保护。（下图为示例组件）

组合式 API（Composition API）正是为了解决本来 Vue2 我的项目中代码逻辑扩散、不易了解和保护的问题。它应用办法（function）进行代码宰割，使代码更为简洁。

与 Vue2 相比，Vue3 中生命周期函数也产生了变更，总结如下：

有须要的同学能够截图保留，以备不时之需。

在 Vue 我的项目中有泛滥 API 和模块，但在一个我的项目中咱们并不会用到全部内容，Vue3 的按需打包模块，能够大幅度压缩打包后的内容体积。
依据官网比照示例，Vue2 中如果仅写了 Hello Word，未用到任何模块 API，打包后大小约为 32KB；而 Vue3 同理，打包后大小约为 13.5KB，能够显著看出降级后的 Vue3 相较于 Vue2 打包体积大幅减小。
说完了 Vue3 的改良，接下来咱们来看看 Vite 又有什么亮眼之处。

在 Vue3 正式公布之前，尤雨溪就提到做了一个新的前端构建工具 -Vite。其自己更是对 Vite 青睐有加，引得 Webpack 开发者直喊大哥：

Vite 到底有什么样的魔力呢？它做到了本地疾速开发启动：

疾速冷启动，而不须要期待打包操作
即时的模块热更新
真正的按需编译，不必期待整个我的项目编译实现、

在应用 Webpack 时，会经验剖析依赖 => 编译打包 => 交给开发服务器渲染整个过程。也就是说，须要先打包，之后将打包后果提供给服务器进行加载。特地是随着模块的一直增多，打包的体积越来越大，造成热更新速度显著拖慢。
而 Vite 间接略过了打包步骤，间接启动开发服务器，申请具体的模块时再对该模块进行实时编译，大大提高了启动速度。

尤雨溪自己也在微博发言解释了其原理：“Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，齐全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件反对，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则能够把同一份代码用 rollup 打。尽管当初还比拟毛糙，但这个方向我感觉是有后劲的，做得好能够彻底解决改一行代码等半天热更新的问题。”
（Vite 具体的实现原理可参考文章：https://juejin.cn/post/684490…）

到这里咱们曾经具体为大家介绍了 Vue3 降级的亮眼性能和 Vite 的劣势，在下局部中咱们会以我的项目实例登程，为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格零碎。
感兴趣的小伙伴们不要错过~

正文完