首页 > 行业资讯 > 小册上新｜Vue 3 技术揭秘

小册上新｜Vue 3 技术揭秘

时间：2022-12-22 来源：浏览：

小册上新｜Vue 3 技术揭秘

掘金小册掘金小册

掘金小册

微信号 juejinxiaoce

功能介绍掘金小册，一个小篇幅、高浓度、成体系、有收益的技术学习平台

收录于合集

#工程师 34 个

#程序员 37 个

Vue 3 正式发布两年后，也就是 2022 年 2 月 7 日，Vue 作者发布了一则消息： Vue 3 将成为新的默认版本 。与此同时，Vue 相关官方周边的核心库 latest 发布标签将指向其 Vue 3 的兼容版本。

另外，随着 Vue 2.7 的发布，Vue 2.7 已经成为 Vue 2.x 的最终次要版本。在这个版本之后，Vue 2 进入了 LTS（长期支持），并且将不再接收新功能。这意味着 Vue 2.x 将在 2023 年底结束其生命周期。

可以预见： 在不久的将来，Vue 2.x 将会逐步淡出江湖， Vue 3 将会成为代替 Vue 2 的主流框架 。

有小伙伴可能会犯嘀咕：那究竟是要先学习 Vue 2 打好基础，还是直接学习 Vue 3 呢？

当 Vue 作者尤大面对这样的提问时，直接给出了非常坚定的回答： 直接学 Vue 3 就行了，基础概念是一模一样的 。

不过，在学习使用 Vue 3 的过程中，很多小伙伴会遇到一些痛点问题，比如：

Vue 3 渲染器做了哪些事情？
Vue 3 的响应式和 Vue 2 相比有什么不同？
Vue 3 编译器的过程是什么样的？
Vue 3 传说中的编译时优化，究竟做了哪些工作？
Vue 3 一些内置内容究竟是如何运作的？
……

只有解答了上述这些问题，才能更好地使用高性能的 Vue.js ，也可以帮助你在做项目的时候，在了解 Vue 运行机制的前提下，写出性能更优的代码。

作为一个全球最顶尖的前端框架之一，Vue 3 整体的思想理念、程序设计、细节取舍、API 设计、项目的工程考量都是非常优秀的！ 通过对源码的学习，不仅仅可以让你快速建立起对 Vue 3 运行机制的深入了解，还可以从中学习到很多程序设计的宝贵经验和架构思想 ！另外，很值得一提的是，在阅读 Vue 3 源码的时候，你会发现大量优秀的设计模式和算法，让人拍案叫绝。

小册设置思路和亮点

虽然道理都懂，但是，直接去啃 Vue 3 源码会非常晦涩难懂，比如一个 baseCreateRenderer 函数就有接近 2000 行代码，可能会让你半途而废（妥妥地“从入门到放弃”），这个估计很多小伙伴们都深有体会。

所以，本小册一方面会对 Vue 3 核心源码做适量的精简，让你可以只用关注核心逻辑实现；另一方面，也配了大量的插图，一图胜千言，可以更加生动地向你展示源码的运行机制。

另外，小册还精心准备了视频先导片，简要介绍 Vue 3 的一些周边知识，这可以帮助你更好地、更有效地开启本小册的学习之旅。

本小册主要划分为了 5 大模块 来依次为你揭开 Vue 3 的“神秘面纱”。

模块一

渲染器实现原理 。从根组件初始化开始，一步步介绍组件实例化、完整更新、diff 过程等。

模块二

响应式原理 。核心介绍 Vue 3 基于 Proxy 实现的响应式原理，深入解读依赖收集过程、响应式触达过程和相关联的 watch、computed、inject/provide 函数实现以及异步批量更新原理。在学习的过程中，你会渐进式体会到与 Vue 2 响应式原理的差异以及异步批量更新的不同之处。

模块三

编译器实现原理 。重点讲解模板是如何被一步步编译成渲染函数的，以及在编译时 Vue 3 所做的大量编译时优化的工作。

模块四

内置组件实现原理 。主要介绍 Vue 3 几个常用的内置组件：Transition、KeepAlive、Teleport 、Suspense 相关的组件运行机制和实现原理。

模块五

特殊元素&指令 。重点分析 v-model 是如何实现双向数据绑定的，以及 slot 插槽是如何实现内容分发的。

为方便你理解，整理出来了如下的思维导图：