VUE 3 组件开发实战 – 在线电子表格文档编辑（一）

收藏

本帖最后由 Lynn.Dou 于 2022-5-25 16:32 编辑

一、VUE 3新功能
2020年09月18日，Vue.js 3.0 正式发布。尤雨溪将vue3的目标描述为：
   1.  让它更快
   2.  让它更小
   3.  使它更易于维护
   4.  使原生目标更容易
   5. 让您的生活更轻松

本次发布框架本身带来了几个大点的改进，本文对这些改进做一个大致的介绍。
（1）Performance（性能）
      在之前的vue2中，某个DOM需要更新时，需要遍历整个虚拟DOM树才能判断哪个地方需要更新，进而重新渲染。而Vue3新增了静态标记，在与上次虚拟节点进行对比时，只对比带有patch flag的节点，所以每次DOM的更新无需再遍历整个DOM树进行判断。
      针对vue2和vue3的性能差异，在官方文档中对具体数据做了介绍：
      1.  SSR速度提高了2~3倍
      2.  Update性能提高1.3~2倍

（2）Composition API（组合API）
      vue2中有data、methods、mounted等存储数据和方法的对象，我们对此应该不陌生了。比如说想实现一个轮播图的功能，那么首先需要在data里写上与此功能相关的数据，在methods里写实现这个功能的方法，在mounted里写上进入页面自动开启轮播的代码…… 这样就会出现一个问题：同一个功能的代码却要分散在在页面的不同地方，维护起来会较麻烦。而vue3的 Composition API就是来解决这个问题的，它主要提供两大好处：
      1.  清晰的代码结构
      2.  消除重复逻辑
首先了解一下 Composition API新特性的入口—— setup()函数，该函数是为组件提供的新属性。
      setup()函数是一个将属性和方法返回到模板的函数，等效于vue2中的beforeCreate 和 created，在组件初始化的时候执行。如果想使用setup里的数据，需要将值return出来，没有从setup函数返回的内容将在模板中不可用。
      vue3提供了一个新函数：ref函数。它的作用是创建一个引用值，主要是对String、Number、Boolean的数据响应做引用。
相对于vue2，vue3中生命周期函数发生了变更，总结如下：
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
需要注意的是，vue2使用生命周期函数时是直接在页面中写入生命周期函数，而vue3则无需写入函数，直接引用即可。

import {reactive, ref, onMounted} from 'vue'

复制代码

  (3）Tree shaking support（按需打包模块）
“Tree shaking”  有人称之为“摇树优化”，那么究竟是什么意思呢？作者对其做了解释：“Tree shaking”其实就是把无用的模块进行“剪枝”，很多没有用到的API将不会打包到最后的包里。
      我们知道在vue中有很多的API和模块，不过一个项目中不可能会用到全部的API和模块，所以“Tree shaking”后，打包后的包体积会大幅度减少。
官方对vue和vue3做了对比，vue2若只写了Hello World，并没有用到任何的模块API，打包后大小约为32kb。而vue3 如果只写HelloWorld，同样没用到任何的模块API，打包后大小约为13.5kb，相对于vue2体积大小大幅度减少。从中也可以看出，Vue3比Vue2更轻量。

  (4）Better TypeScript support（更好的TS代码支持）
      为了更好的用户使用，Vue3使用了TypeScript重新对Vue框架进行了重写，增加了对TypeScript更好的支持。

（5）Fragments（碎片）
vue2要求组件模板中只能有一个根节点，而不可以有多个根节点。vue3不再限制模板只能有一个根节点。这也就意味着下图这种写法是支持的了。

image.png857729797.png

（6）多个v-model同时使用
      Vue 2 只允许在一个组件上使用一个 v-models。在 Vue 3 中，我们可以将任意数量的 v-model 绑定到我们的自定义组件上。

二、新工具vite介绍
      除了vue-cli 之外，官方还提供了一个新的脚手架工具：vite。
      Vite是尤雨溪开发的一个新工具，它是一个基于 Vue3 单文件组件的非打包开发服务器，具有以下的优点：
      1.  可以快速的冷启动，不需要等待打包；
      2.  即时的热模块更新；
      3.  真正的按需编译，不用等待整个项目编译完成。

      可以说，vite的出现大大的撼动了webpack的地位。Webpack在打包的时候会有两个阶段：编译和打包。打包时存在一个问题，那就是开发阶段也需要打包构建然后才能在浏览器看到页面，这样会导致除此启动等待时间较长。并且打包的时候随着模块的不断增多，打包的包体积较大，这就会造成热更新速度明显拖慢。
      Vite的诞生解决了这个问题，尤雨溪在微博中的发言解释了原理：“Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在
服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。”

Vite具体的实现原理可参考文章：https://juejin.cn/post/6844904136299790349

三、使用vite初始化一个vue3 项目
      初始化项目命令：( 注：project-name 为项目名)
            $ npm init vite-app <project-name>
            $ cd <project-name>  //进入项目目录
            $ npm install  //安装项目所需依赖
            $ npm run dev  //启动项目
      做个示例：搭建一个项目名为 myVue3 的项目。
      执行命令：npm init vite-app myVue3
image.png930511474.png