一、从以下方面了解 Vue 3 新特性
1.RFC机制
Vue 3 的第一个新特性和代码无关,而是 Vue 团队开发的工作方式。关于 Vue 的新语法或者新功能的讨论,都会先在 GitHub 上公开征求意见,邀请社区所有的人一起讨论, 你随时可以打开这个项目,我把链接放在这里https://github.com/vuejs/rfcs。Vue 3 正在讨论中的新需求,任何人都可以围观、参与讨论和尝试实现。这个改变让 Vue 社区更加有活力。
2.响应是系统
Vue 2 的响应式机制是基于 Object.defineProperty() 这个 API 实现的,此外,Vue 还使用了 Proxy,这两者看起来都像是对数据的读写进行拦截,但是 defineProperty 是拦截具体某个属性,Proxy 才是真正的“代理”。更重要的是,我觉得 Proxy 代表一种方向,就是框架会越来越多的拥抱浏览器的新特性。在 Proxy 普及之前,我们是没有办法完整的监听一个 JavaScript 对象的变化,只能使用 Object.defineProperty() 去实现一部分功能。前端框架利用浏览器的新特性来完善自己,才会让前端这个生态更繁荣,抛弃旧的浏览器是早晚的事。
3.全部模块使用 TypeScript 重构
之前只是用 JavaScript 来构建他的前端项目,而 JavaScript 是弱类型的语言。类型系统带来的好处以后我再跟他细说,现在只是笼统地告诉他,类型系统带来了更方便的提示,并且让我们的代码能够更健壮。
4.Composition API 组合语法
使用 Composition API 后,代码看起来很烦琐,没有 Vue 2 中 Options API 的写法简单好懂,但 Options API 的写法也有几个很严重的问题:由于所有数据都挂载在 this 之上,因而 Options API 的写法对 TypeScript 的类型推导很不友好,并且这样也不好做 Tree-shaking 清理代码。新增功能基本都得修改 data、method 等配置,并且代码上 300 行之后,会经常上下反复横跳,开发很痛苦。代码不好复用,Vue 2 的组件很难抽离通用逻辑,只能使用 mixin,还会带来命名冲突的问题。我们使用 Composition API 后,虽然看起来烦琐了一些,但是带来了诸多好处:所有 API 都是 import 引入的(现在我们的例子还没有工程化,后续会加入)。用到的功能都 import 进来,对 Tree-shaking 很友好,我的例子里没用到功能,打包的时候会被清理掉 ,减小包的大小。不再上下反复横跳,我们可以把一个功能模块的 methods、data 都放在一起书写,维护更轻松。代码方便复用,可以把一个功能所有的 methods、data 封装在一个独立的函数里,复用代码非常容易。Composotion API 新增的 return 等语句,在实际项目中使用 <script setup> 特性可以清除, 我们后续项目中都会用到这样的操作。
5.新的组件
Vue 3 还内置了 Fragment、Teleport 和 Suspense 三个新组件。这个倒不难,项目中用到的时候会详细剖析,现在你只需要这仨是啥就行,以及它们的用途即可:Fragment: Vue 3 组件不再要求有一个唯一的根节点,清除了很多无用的占位 div。Teleport: 允许组件渲染在别的元素内,主要开发弹窗组件的时候特别有用。Suspense: 异步组件,更方便开发有异步请求的组件。
6.新一代工程化vite
Vite 不在 Vue 3 的代码包内,和 Vue 也不是强绑定,Vite 的竞品是 Webpack,而且按照现在的趋势看,使用率超过 Webpack 也是早晚的事。Vite 主要提升的是开发的体验,Webpack 等工程化工具的原理,就是根据你的 import 依赖逻辑,形成一个依赖图,然后调用对应的处理工具,把整个项目打包后,放在内存里再启动调试。由于要预打包,所以复杂项目的开发,启动调试环境需要 3 分钟都很常见,Vite 就是为了解决这个时间资源的消耗问题出现的。你可能不知道,现代浏览器已经默认支持了 ES6 的 import 语法,Vite 就是基于这个原理来实现的。具体来说,在调试环境下,我们不需要全部预打包,只是把你首页依赖的文件,依次通过网络请求去获取,整个开发体验得到巨大提升,做到了复杂项目的秒级调试和热更新。
总结
新的 RFC 机制也让我们所有人都可以参与 Vue 新语法的讨论。工程化工具 Vite 带来了更丝滑的调试体验。对于产品的最终效果来看,Vue 3 性能更高,体积更小。对于普通开发者来说,Composition API 组合语法带来了更好的组织代码的形式。全新的响应式系统基于 Proxy,也可以独立使用。Vue 3 内置了新的 Fragment、Teleport 和 Suspense 等组件。对于 Vue 的二次开发来说,自定义渲染器让我们开发跨端应用时更加得心应手。对于 Vue 的源码维护者,全部的模块使用 TypeScript 重构,能够带来更好的可维护性。
二、vue2升级vue3
首先,我带你明确了什么时候该升级 Vue 3,什么时候该继续使用 Vue 2 的兼容版本。现在,Vue 3 的官方生态在整体都比较稳定,新的项目完全可以直接选择 Vue 3。并且,对于那些需要长期维护的项目,其实也很有必要进行升级。不过,Vue 2 很快会停止更新,如果你的项目需要兼容 IE11,那就需要继续使用 Vue 2.7。这样,在保持好项目的兼容性的前提下,还可以体验到 Composition API 带来的便利。
然后,在升级 Vue 的过程中,我们可以利用官方和社区的工具,帮助我们高效地升级。我们可以使用 compat 来给出提醒,项目中设置 @vue/compat 作为 vue 的别名,这样内部就会把所有和 Vue 2 的语法相关的升级信息提示出来,逐个替换即可,或者直接使用 gogocode 进行自动化批量替换。
最后,我想说的是,全面拥抱 Vue 3 也算是一次离开舒适圈的挑战,这带来的不只是新框架的体验,同时也可能是更好的潜力与更好的待遇。