尤大的忏悔：Vue 3 启示录

What Vue’s Creator Learned the Hard Way with Vue 3

tips:本人英语不好借助工具翻译，请勿吐槽！明白其中大概意思即可！

The release of Vue 3 taught creator Evan You some hard lessons, but it’s led to major changes in how the framework will handle upgrades.
Dec 13th, 2023 3:00am by Loraine Lawson

Evan You, creator of Vue.js, learned a few hard lessons in the transition from version 2 to version 3 of the progressive JavaScript framework for building user interfaces, he told attendees at the VueConf in Toronto 2023.
Vue.js 的创建者 Evan You 在 2023 年多伦多 VueConf 上告诉与会者，他在从用于构建用户界面的渐进式 JavaScript 框架第 2 版到第 3 版的过渡中吸取了一些惨痛的教训。

“The first mistake that we made was that there were too many small breaking changes each,” You said in a video of the November message that posted Nov. 2. “The core of the issue here is that every single change looked manageable in isolation, but the complexity really compounds exponentially when the many changes are combined.”
“我们犯的第一个错误是，每个错误都有太多的小的突破性变化，”你在11月2日发布的11月消息视频中说。“这里问题的核心是，每一个变化看起来都是可以单独管理的，但当许多变化结合在一起时，复杂性确实呈指数级增加。

As a corollary to that, he learned that when making changes, it’s wise to keep things working by default. That’s led to a workflow change for the framework’s maintainers, he added, in which it will use a deprecating cycle in the future.
由此推论，他了解到，在进行更改时，明智的做法是让事情默认运行。他补充说，这导致了框架维护者的工作流程发生了变化，未来它将使用弃用周期。

“For everything that I want to change or break or remove, we always first keep everything working, and then deprecated it,” he clarified. “Then there will be an opt-in phase where the new behavior is introduced under a flag, and the user can explicitly opt in to the new behavior without breaking anything. And then eventually, the deprecated behavior is removed in the future release.”
“对于我想更改、破坏或删除的所有内容，我们总是首先保持一切正常，然后弃用它，”他澄清道。“然后将有一个选择加入阶段，在这个阶段，新行为被引入一个标志，用户可以在不破坏任何东西的情况下明确选择加入新行为。然后最终，在将来的版本中删除已弃用的行为。

Vue maintainers will also stagger changes between releases so there will never again be a “big bunch of breaking changes altogether,” he explained. He compared the plan to Angular and Ember’s approaches, which spread out small breaking changes between the major versions over a relatively long time.
他解释说，Vue 维护者还将错开版本之间的更改，因此再也不会出现“一大堆重大更改”。他将该计划与 Angular 和 Ember 的方法进行了比较，后者在相对较长的时间内分散了主要版本之间的小规模突破性变化。

“Vue has gotten to the stage where we believe this is going to be extremely important for the long run,” he said. “We can assure you that in the short term, we definitely are not thinking about any breaking changes. And for the long run, we want V3 to be the stable foundation. And we will take this kind of change very seriously.”
“Vue 已经到了我们认为从长远来看这将极其重要的阶段，”他说。“我们可以向你保证，在短期内，我们绝对不会考虑任何重大变化。从长远来看，我们希望 V3 成为稳定的基础。我们将非常认真地对待这种变化。

Mind the Ecosystem

The second lesson he learned is to reach out to the ecosystem library authors when there are changes, to ensure that issues are addressed before the release hits the registry, You said.
You 说，他学到的第二个教训是，当有变化时，要联系生态系统库的作者，以确保在版本到达注册表之前解决问题。

TRENDING STORIES

What Vue’s Creator Learned the Hard Way with Vue 3
Web Development in 2023: JavaScript Still Rules, AI Emerges
VanJS: a Minimalist, ‘Vanilla JavaScript’ UI Framework
How to Build a Server-Side React App Using Vite and Express
Combining AI with React for a Smarter Frontend

“Mistake number two is underestimating the impact on ecosystem libraries,” You said. “We didn’t think in the context of the amount of work library authors would have to [do] to adapt their existing libraries to be V3.”
“第二个错误是低估了对生态系统图书馆的影响，”尤说。“我们不认为在工作库数量的背景下，作者必须[做]将他们现有的库调整为 V3。”

The result is that when they changed a lot of internal APIs and other internal behavior, it made it “very difficult” for big libraries that relied on these internal behaviors to upgrade to Vue 3, he said. That’s led to long upgrade times for major ecosystem libraries, including Nuxt and Beautify.
他说，结果是，当他们更改了大量内部 API 和其他内部行为时，这使得依赖这些内部行为的大型库升级到 Vue 3 变得“非常困难”。这导致主要生态系统库（包括 Nuxt 和 Beautify）的升级时间很长。

“In fact, these are also two of the most prominent examples of mutual applications being stuck on old versions because of the difficulty of upgrading from those dependencies,” he said. “So the lesson learned here is that, obviously, ecosystem dependencies are critical.”
“事实上，这也是两个最突出的例子，由于难以从这些依赖项升级，相互应用程序被困在旧版本上，”他说。“因此，这里吸取的教训是，显然，生态系统依赖性至关重要。

To combat this potentiality, Vue has adopted an ecosystem-automated Continuous Integration system that allows it to run all the changes in the Vue core against its downstream ecosystem dependencies and downstream projects that depend on Vue.
为了应对这种潜力，Vue 采用了生态系统自动化的持续集成系统，允许它针对其下游生态系统依赖项和依赖 Vue 的下游项目运行 Vue 核心中的所有更改。

“As of now we have over 15 projects integrated in the system, and we will be adding more in the future,” he said. “Every commit can be run against all these downstream libraries before we make releases, and we will know whether things break before we even do the release. We can reach out to these ecosystem library authors to work with them to resolve these issues before the release actually hits the registry.”
“截至目前，我们已经将超过15个项目集成到系统中，我们将在未来增加更多项目，”他说。“在我们发布之前，每个提交都可以针对所有这些下游库运行，我们甚至在发布之前就知道事情是否中断。我们可以联系这些生态系统库作者，与他们合作，在版本真正进入注册表之前解决这些问题。

Related to this is that Vue wants to discourage and prohibit the use of internal APIs because they noticed that has been a major contributing factor of difficulty for library subgroups, he added.
他补充说，与此相关的是，Vue 希望阻止和禁止使用内部 API，因为他们注意到这是库子组困难的一个主要因素。

“So luckily, with the availability of TypeScript in most of these projects, nowadays, we’re able to enforce that both at the type level and at the runtime level,” he said. “We still need to expose some internal APIs for official tools or libraries to hook into. But for ecosystem libraries that we don’t have direct control over, we will essentially move those private APIs from the type definitions so that it will be an error if these libraries ever tend to use them.”
“幸运的是，随着 TypeScript 在大多数项目中的可用性，如今，我们能够在类型级别和运行时级别强制执行它，”他说。“我们仍然需要公开一些内部 API，供官方工具或库挂钩。但是对于我们无法直接控制的生态系统库，我们基本上会将这些私有 API 从类型定义中移除，这样如果这些库倾向于使用它们，那将是一个错误。

Release Everything Together

It was a mistake to not release everything together, he continued. Vue 3 core was released in September 2020, while many ecosystem parts were still a work in progress. There were documentation issues and the composition API wasn’t introduced as a first-class concept in the documentation in the beginning, he said. Official libraries, migration build, dev tools support — all were lacking when Vue core stable was released, he added.
他继续说，不把所有东西一起发布是一个错误。Vue 3 核心于 2020 年 9 月发布，而许多生态系统部分仍在进行中。他说，存在文档问题，而且组合 API 一开始并没有作为文档中的一流概念引入。他补充说，官方库、迁移构建、开发工具支持——所有这些都是在 Vue 核心稳定版发布时所缺乏的。

“The reason we did that was because we felt it was important to get something out of the door, so the ecosystem can have the incentive to […] start trying things out,” You said. “But the result is releasing it without a completed ecosystem brought confusion to a lot of early adopters.”
“我们这样做的原因是，我们觉得把一些东西拿出来很重要，这样生态系统就可以有动力[…]开始尝试，“你说。“但结果是在没有完整生态系统的情况下发布它，给许多早期采用者带来了困惑。

In a big release, he said, it’s more important to have things polished and make sure everything is ready than to get something out the door, he acknowledged.
他说，在大型发布中，打磨东西并确保一切准备就绪比拿出一些东西更重要，他承认。

“More importantly, before big releases, you want to find ways to gather feedback and work with library maintainers to upgrade the projects before releasing,” he said. “This is being more proactive in the collaboration of the stakeholders and ecosystem, and this is something we definitely want to improve on if we want to do big changes in the future.”
“更重要的是，在大规模发布之前，你要想办法收集反馈，并与库维护人员合作，在发布之前升级项目，”他说。“这是在利益相关者和生态系统的合作中更加积极主动，如果我们想在未来做出重大改变，我们肯定希望改进这一点。”

What Vue 3 Got Right

That said, there are things Vue got right with this release, he continued, starting with embracing TypeScript.
也就是说，Vue 在这个版本中做对了一些事情，他继续说道，首先是拥抱 TypeScript。

“Nowadays, type checking is table stakes for frontend solutions,” You said. “If you look at any major TypeScript [or] major frontend solutions, right now TypeScript integration [and] TypeScript support is going to be the first thing people look at.”
“如今，类型检查是前端解决方案的赌注，”You说。“如果你看一下任何主要的TypeScript或主要的前端解决方案，现在TypeScript集成[和]TypeScript支持将是人们首先关注的事情。

TypeScript has proven to “vastly improve” maintainability, especially in large team environments working on long-term projects, he said. Moving to TypeScript in the codebase also vastly improved the maintainability of Vue itself, he added, creating a good foundation for future iterations.
他说，TypeScript已被证明可以“大大提高”可维护性，特别是在从事长期项目的大型团队环境中。他补充说，在代码库中迁移到 TypeScript 也极大地提高了 Vue 本身的可维护性，为未来的迭代奠定了良好的基础。

Another thing Vue got right was embracing composition, he said. That was something people originally questioned that has worked out well for Vue, he added.
他说，Vue 做对的另一件事是拥抱构图。他补充说，这是人们最初质疑的事情，但对 Vue 来说效果很好。

“We still remember the early days when composition API was introduced. It was inspired by React hooks, obviously, but it’s rooted in Vue’s own reactivity system — but in the early days, there was a lot of controversy. People didn’t really get why we are doing it,” he said.
“我们仍然记得组合式 API 被引入的早期。显然，它的灵感来自 React 钩子，但它植根于 Vue 自己的响应式系统——但在早期，存在很多争议。人们并没有真正理解我们为什么要这样做，“他说。

In fact, there are still people who prefer the Options API, but there are limitations with it that the composition API does not have. Part of this is because Vue’s user base has shifted, he said. In the early days, most users were focused on small to medium-use cases where the focus was easy integration into existing backend systems. But over time, Vue maintainers have seen users build more complex and demanding use cases, as well as large-scale single page applications.
事实上，仍然有人更喜欢 Options API，但它存在组合 API 所没有的限制。他说，部分原因是 Vue 的用户群发生了变化。在早期，大多数用户专注于中小型用例，重点是轻松集成到现有后端系统中。但随着时间的流逝，Vue 维护者已经看到用户构建了更复杂、要求更高的用例，以及大规模的单页应用程序。

“For Vue to first adapt to its changing user base, and also to adapt to the changing demands of the industry, we have to come up with something that addresses those new problems that arises with these new demands, and that is scalability,” he said. “So composition API was invented, essentially, to try to provide a way to unlock this kind of scalability, while retaining as much user-friendliness that’s routed in Vue — as much as possible.”
“对于Vue来说，首先要适应其不断变化的用户群，并适应行业不断变化的需求，我们必须想出一些东西来解决这些新需求带来的新问题，那就是可扩展性，”他说。“因此，组合 API 的发明本质上是为了尝试提供一种方法来解锁这种可扩展性，同时尽可能多地保留 Vue 中路由的用户友好性。”

Those who have adopted composition API have found that it has real benefits, he added.
他补充说，那些采用组合式API的人发现它有真正的好处。

“This also has led to really strong community efforts like VueUse, which provides us with a collection of extremely useful utilities that addresses a lot of problems that [aren’t] really suitable to be included in Vue core, but it’s nicely addressed by the community,” he said. “In fact, I believe VueUse is probably one of the biggest benefits that’s directly resulted from composition API.”
“这也导致了像 VueUse 这样非常强大的社区努力，它为我们提供了一系列非常有用的实用程序，解决了许多问题，这些问题[并不]真正适合包含在 Vue 核心中，但社区很好地解决了它，”他说。“事实上，我相信 VueUse 可能是组合 API 直接带来的最大好处之一。”

Developer Experience Investments Pay off

Vue also made the right choice by investing in developer experience, he added. That actually led to the creation of the popular web build tool, Vite, which was born out of a Vue-only dev server prototype. Now, a number of frameworks leverage Vite, including Nuxt.
他补充说，Vue 也做出了正确的选择，投资于开发者体验。这实际上导致了流行的 Web 构建工具 Vite 的创建，它诞生于一个仅限 Vue 的开发服务器原型。现在，许多框架都利用了 Vite，包括 Nuxt。

Vue has seen its investments in its IDE pay off in the form of an expanded ecosystem that benefits web developers as a whole, he said. The IDE investments led to Volar, an umbrella project for a subset of projects that includes Vue’s language server and Vue TSC, which is a command line interface that wraps TypeScript and provides command line time checking for Vue components.
他说，Vue 在 IDE 上的投资已经得到了回报，其形式是扩展了生态系统，使整个 Web 开发人员受益。IDE 投资促成了 Volar，这是一个项目子集的总括项目，包括 Vue 的语言服务器和 Vue TSC，后者是一个封装 TypeScript 并为 Vue 组件提供命令行时间检查的命令行界面。

“This whole set of tools, initially only for Vue — again, similar to Vite — got expanded into an ecosystem of a collection of tools that helps frameworks build improved IDE and TypeScript support,” You said. “Volar is now also spinning into its own framework agnostic core that not only supports Vue, but is also powering Astro and MDX and […] other potential frameworks that will adopt this.”
“这整套工具，最初只用于 Vue——同样，类似于 Vite——被扩展为一个由一系列工具组成的生态系统，帮助框架构建改进的 IDE 和 TypeScript 支持，”You 说。“Volar 现在也正在旋转到自己的框架无关核心中，它不仅支持 Vue，而且还为 Astro 和 MDX 提供支持，并且 […]其他可能采用此框架的框架。

That’s unique to Vue’s ecosystem, he claimed. “We’re seeing a lot of good ideas that start in the ecosystem, and then start having bigger impact than just the Vue ecosystem,” You said.
他声称，这是 Vue 生态系统所独有的。“我们看到很多好的想法从生态系统开始，然后开始产生比 Vue 生态系统更大的影响，”You 说。

Finally, Vue 3 fulfills the goals that they set out for it — including better performance, better types for support, better scalability and a better development experience, he said. With Vue 2 support ending this month, downloads of Vue 3 have reached nearly 50% with V3 adoption almost doubling in the past year.
最后，Vue 3 实现了他们为它设定的目标——包括更好的性能、更好的支持类型、更好的可扩展性和更好的开发体验，他说。随着 Vue 2 支持本月结束，Vue 3 的下载量已达到近 50%，V3 的采用率在过去一年中几乎翻了一番。