Vue 3.0的新特性和设计理念：尤雨溪在多伦多VueConf的演讲

by

• Bruno Couriol

摘要：

按照规划，Vue.js框架的主迭代版本将在2020年第一季度发布，在VueConf多伦多会议上，该框架的创始人兼项目领导者尤雨溪讨论了Vue 3背后的设计理念以及新版本中添加的最新特性。

按照规划，Vue.js框架的主迭代版本将在2020年第一季度发布，在VueConf多伦多会议上，Vue.js的创始人兼项目领导者尤雨溪讨论了Vue 3背后的设计理念以及新版本中添加的最新特性。

尤雨溪首先提到，与其他流行的框架不同，Vue与任何公司都没有关联关系，因此Vue的开发是由Vue开发者社区以及如何更好地满足他们的需求来驱动的。随着Vue社区的发展，它也变得多样化起来。尤雨溪将只具有基础HTML/CSS知识的初学者、从jQuery转移过来的专业人士、从其他框架迁移过来的老手、寻找前端解决方案的后端工程师以及处理大规模软件的架构师进行了识别和区分。

开发社区中人群的多样性其实对应了框架使用场景的多样性。有些开发人员希望将交互性引入到遗留应用中，而有些人则只是想要处理一个一次性的项目，这样的项目有快速的交付周期，但是在维护方面无需过多关注。针对这个话题，架构师想要处理的可能是一个要持续数年的大规模项目，而且在项目的生命周期之内，必然要面对开发人员的变动。

因此，Vue在设计自身框架时需要面对受众和使用场景多样化的挑战，这必然会导致一定的折衷。Vue 3背后的一个核心驱动力在于，尽管开发人员都很欣赏Vue 2 API易于学习的特点，但是同样的API在大规模使用时也出现了可维护性的问题。另一方面，为了满足多样化的需求，持续向框架添加特性会带来bundle越来越重的风险。尤雨溪在四个维度对Vue 3发布版本的折衷和平衡进行了分组。

第一个折衷就是易用性（approchability）与可扩展性（scalability）。Vue较低的进入壁垒是采用它的重要因素。尽管Vue想要保持对开发人员的易用性，但是在构建大型或复杂组件时，它必须要解决当前基于对象的API（叫做Options API）所暴露的问题。InfoQ之前已经介绍过它的新API（叫做Component API），该API有望更好地为复杂组件分离关注点和可重用性。为了保持Vue的易用性，Component API完全是附加和可选的。

与之类似，按照设计决策，Vue 3将会使用TypeScript编写。除了增强Vue代码库的可维护性以及更易于开发者为其贡献之外，该决策还有两个积极的影响。首先，随着TypeScript的流行程度不断增加并且已经成为大型项目的常见选择，在Vue 3内部使用TypeScript能够让开发人员从Vue的TypeScript定义中收益，同时还得到现代IDE的常见代码支持，如Visual Studio Code或WebStorm。其次，即便不用TypeScript，普通的JavaScript用户也能受益于现代IDE的代码智能特性。另外，尤雨溪认为TypeScript的Vue代码其实90%都是JavaScript，因为Vue类型定义只允许开发人员在其代码的很少一部分上添加标注。

第二个维度的关注点是视图声明。Vue 2同时支持模板和基于JSX的渲染函数（render function）。Vue社区中熟悉HTML和CSS的那部分人看重对模板的支持，而没有接触过这些技术的开发人员则更喜欢渲染函数（尤雨溪暗示iOS开发人员适合这种方式）。Vue 3试图利用这两种方式的优点。

一方面，模板提供了性能优化，Vue 3在将模板编译为优化后的渲染函数时利用了这一点，渲染函数本身会使用一个优化的数据结构来实现diff的目的。模板会明确分离静态节点（<p> Lorm ipsum </p>）和动态节点（<span>{{message}}</span>），Vue 3的diff算法可能会在一个特定的数据结构中跟踪动态部分及其依赖。

另一方面，JSX渲染函数允许开发人员借助JavaScript语言完整的表达能力来表达复杂的特殊（ad-hoc）逻辑。虽然在某些情况下，JSX渲染函数非常实用并且是完全必要的，但是以通用的方式优化它所面临的困难是众所周知的。尤雨溪指出，要实现这一点需要非常聪明的流分析，Prepack Facebook项目就是为了实现这一目标的，但是该项目却因为困难而停滞不前。因此，Vue 3维持了其双重视图声明机制，同时寻求优化视图模板的diff和渲染。

另外一项折衷就是功能的强大与项目的大小。随着每个新特性的加入，每位用户的bundle大小都可能会增加。Vue 3以两种方式来解决这个问题。尤雨溪首先指出，大多数的全局API和内部Vue辅助程序都会以ES模块导出的形式提供，因此能够实现摇树（tree-shakeable）优化（一种代码导入的优化技术，能够实现死代码消除，避免引入根本不会执行的代码，参见维基百科。——译者注）。另外，Vue 3编译器也会为模板生成摇树优化的代码。尤雨溪给出了如下使用v-model的样例：

<input v-model="text" type="checkbox">
<keep-alive></keep-alive>

它将会被编译为：

import {vModelCheckbox, KeepAlive, ...} from "vue"
...

尤雨溪提到，这样的话，Vue 3核心的大小将会从20KB降低到10KB。开发人员只需要以这个核心为基础，添加他们所需的Vue模块即可。

尤雨溪设想的最后一个折衷是一致性与低层级的灵活性。Vue 3将通过更新Vue Router、Vuex和test-utils来提供一致的体验，使它们与新的愿景保持一致。Vue 3还将为开发者提供定义自己的渲染器的能力。React中已经提供了这种能力，并被广泛用于为各种托管环境创建渲染器，如移动设备或终端设备。

Vue 3还将为自定义模板编译过程输出提供低层级API。尤雨溪提到，工具可以利用该API来提供更好的DX或UX（例如在UI标记中强化可访问性特征）。特别是，开发人员可以定义自定义转换，将其用于已解析的模板。虽然Vue社区将会推出什么还有待观察，但是如果Babel社区有这种迹象的话，那么可以推测增强的模板语言（例如，带有宏功能）有可能会出现。这些低层级工具的第一个应用程序是Vue 3 模板浏览器，尤雨溪说新的API能够让他在一个下午就将其构建出来。

Vue 3计划在2020年第一季度发布。当前的Vue 2版本除了服务器端渲染之外，还有一些性能的改善，包括更小的库和更快速、更轻量级的虚拟DOM实现，后者fork自Snabbdom。

完整的演讲可以通过该 地址访问，其中包括一些扩展信息和样例。Vue是一个用于构建用户界面（包括单页面应用程序)的渐进式框架。Vue.js遵循MIT开源协议。欢迎通过Vue.js GitHub包对其进行贡献并请遵循Vue.js贡献指南。

查看英文原文：New Features and Design Principles of Vue 3.0 - Evan You at VueConf Toronto