Vue.js作者尤雨溪解析了Vue3与Vue2的区别，尤其是如何使用已经升级过的Virtual DOM方面。

两年前，有一篇关于JS框架Vue.js文章说道：相较于两大领先框架——Facebook的React和Google的Angular，在JS生态系统中Vue算是一种非主流的选择项。其中一位负责人说道：它看起来不够企业化，更草根的感觉。

相较于最流行的JS框架-React，Vue与其最大区别就是它完全是由官方人员来维护的。Vue的官方文档有在解释这个问题的原因：在React任何内容都是Js，从通过JSX来表达HMLT结构，到最近考虑将使用css-in-js；而Vue则是拥抱经典的web技术并在此基础之上构建（这个引用来自Vue2的文档，在Vue3中没有找到相关解释）。

近几年，针对重JS方式的React和应用它的框架Next.js有很多的反击声，而针对当代流行框架Vue，Svelte和Lit的下一个动作，就像Vue提到的：在经典的web技术上去构建应用。

Vue全家桶的说明

本篇文章中重点关注尤雨溪这个月在阿姆斯特丹举行的JSworld会议上发表的年度演讲“Vue全家桶”。

由于疫情原因，Evan上次参加JSworld还是三年前，所以他列出了三年前在Vue生态系统中还不存在或者不稳定的内容：Vue3是不稳定的，Vite(构建工具), Volar(一个构建内置编程语言工具的框架)和Pinia(Vue生态的状态管理库)是不存在的。

Evan强调：我们主要围绕Vite创建了一个完整的新生态，基于Vite我们有了这些新的令人兴奋的产出，这些产出不仅仅与Vue生态系统相关，甚至还能跟其他框架有关联。

Evan称赞了当前的Vue工具生态，首屈一指的是Nuxt——构建Vue应用的核心框架。但是2023年，Vue方面主要还是持续关注Vue3的稳定。尽管Vue3在一年前的去年2月变成了新的默认标准，但Vue2仍然被你称为“遗留项目”。他指出，大部分Vue3被运用在新项目中。

Evan同时说道：我们仍然处于V2到V3的过渡期，很多的大型项目都在使用Vue2或者正在计划迁移到Vue3。

Vue3和它新的Virtual DOM

在讨论完Vue3这一年计划中的众多变化之后，Evan花了一点时间解释Vue3的渲染机制与Vue2的不同，他强调到：随着时间渲染策略已经发生了变化，尤其是关系到它与Virtual DOM的交互方式（VDOM）。

起初，我在全力思考Vue3的时候我受到了一个关于VDOM的启发，并且发现这个启发是有效的。后来在JSworld大会上，Marc Backes做了一个题为“Let's build a virtual dom”。接下来的三张PPT完美地总结了VDOM是什么和结合到像Vue这样框架的目的是什么（VDOM在React中很受欢迎，但是它的原理也被很多像Vue的其他框架所采纳）。

Backes同时还展示了被Vue使用的渲染流程图（这是Vue文档中同一图表的更丰富多彩的版本）

Evan继续说道：在Vue2我们使用的是纯粹的Virtual DOM，跟React一样，一点儿编译时的优化都没有做，好吧，有一点但真的不多。

在组件树或是整个应用层面，在Vue2每个组件通过跟踪他们自己的依赖，我们有很细粒度的更新，这样做的缺点是virtual DOM的开销，包括重新创建virtual DOM节点和便利组件树来进行diff，Vue2始终在消耗着这部分开销。

为了解决这个问题，在Vue3他们使用了不同的方式，Evan称其为“compiler-informed virtual DOM”, 意思就是它能做更多编译时的优化。

Single-File Component

复杂的VDOM逻辑之外，让Vue发展迅速的是它的单文件组件，Vue定义SFC为：一种特殊的文件格式，允许我们在一个文件里封装模版、逻辑和Vue组件的样式。Vue也称SFC为类HTML文件格式。

2017年的一次采访到Damian Dulisz——Vue.js的一位核心成员，他说：SFC格式使得代码更容易理解和更合理。

SFC并不普遍受到开发人员的喜爱。甚至Vue.js文档也承认这一点：“一些来自传统web开发背景的用户可能会担心，SFC在同一个地方混合了不同的关注点-HTML/CSS/js应该将它们分开！”

针对这一异议，Vue认为SFC方法“实际上使组件更内聚和可维护性”

Conclusion

如果Evan You的JSworld分享值得借鉴，2023年对Vue开发者来说不会有任何惊喜。它将继续致力于让开发人员从Vue 2升级到Vue 3，同时对其不断增长的生态系统进行进一步迭代。