Vue 3是一个错误,我们不应该再犯

更新日期: 2022-07-05 阅读: 1.2k 标签: Vue3

文本是翻译的,作者Fotis Adamakis, 他是  vue.js雅典会议的共同组织者,文中的第一人称指的是该大佬。

从最初引入Vue 3开始,已经过去了4年多。经过多次RFC的讨论,以及其他现代框架(包括react和Svelte)的影响,Vue 可能已经成为最强大和最全面的框架,能够逐步支持任何规模和架构的应用。

听起来很刺激,对吗?嗯,事实远非如此。从那时起,就发生了很多延迟和降级的情况。尽管Vue 3最近成为了新的默认版本,但很多重要的支持库还没有准备好,甚至没有计划与两个版本兼容。这说明很多代码库还停留在Vue 2上,迁移到版本3的路径并不容易。

请不要误解我,Vue 3非常棒。它可能是目前最好的框架了。但事实上,从第二版开始没有简单的迁移路径,这是一个错误,我们不应该在未来重复。

Vue 2的问题

Vue一直被认为是一个进步的框架。选项api很容易理解,我们可以学习并在需要时引入更复杂的模式和库。小的学习曲线和良好的文档是大家喜欢它的原因。

另一方面,在将通用逻辑抽象为mixin时,使用继承而不是组合的体系结构缺陷造成了许多可伸缩性问题,并破坏了干净组件声明的许多原则。Vue3 引入组合API 作为一种解决方案。

另一个重要的问题是对typecript的支持。当然,在Vue组件中编写typescript就像在script标签中添加type="ts"一样容易。但在模板和 store 里,支持是有问题的。

vue3 解决方案

完全重写是一个改善框架内部结构的机会。Vue3 广泛地使用了Typescript,包括响应性机制在内的许多方面都从头开始。这使得Vue 3在数据包大小、初始渲染、更新和内存使用方面的性能得到了明显的改善。

此外,还增加了很多新的功能。

  • Composition API
  • 语法糖<script setup>
  • Fragments
  • Emits Component Option
  • 来自@vue/runtime-core的createRenderer API可以创建自定义渲染器
  • style 里面可以绑定变量
  • SFC的<style scoped>现在可以包括全局规则或只针对插槽内容的规则
  • Suspense

新功能改善了整体的开发体验,欢迎很多开发都的追捧。争论的焦点是,其中大部分功能,包括组合API、teleport、 suspense 等,在Vue 2中已经都能用了,所以它们不能真正算作框架的改进。

真正的问题

破坏的性变化,有很多。其中一些很简单,比如Events API。Vue实例不能再用作事件总线,但有即插即用的解决方案,如 mitt 或 tiny-emitter,可以用作直接替代。这需要有一定工作时间,但可以及时完成,没有太多风险。

另一方面,有些变化不能安全地进行,也不能不进行小规模或大规模的重构。在一个用Vue 2构建的现有大型应用中,你可能会使用一些被废弃或改变的API。

迁移构建应该是两个版本之间的桥梁,但由于有这么多被废弃的功能,它对大型项目并不适用。此外,官方对一些基本的支持库的建议是迁移到另一个不同的库,这进一步增加了复杂性。由于有这么多的移动组件,即使迁移构建成功,也需要大量的工作,这对大项目来需要有更多的时间用来解决技术债务。


不需要的东西

Vue始终是一个有意义的框架。你可以试着猜测一个API应该如何工作,你很可能是对的。Vue 3不再是这种情况。

一个例子是关于新的基于函数的Vue组件编写方式的意见征集,有大量的回应,包括正面和负面的。不管你在这场争论中的立场如何,将社区分成两半绝不是一个好兆头。

文档

在开发过程中,特别是在一个新的框架中,谷歌和StackOverflow是你最好的朋友。目前,Vue 2的答案占据了压倒性的优势,但在Vue 3中,很多API实现的原理都不一样了,因此可能会造成一定的混乱。

生态

一个框架有多强大,它的生态系统就有多强大。有争议的决定和不负责任的废弃功能驱使许多贡献者离开,导致许多库被放弃。但是,当你没有给开源库一个可行的方法来支持两个版本的时候,就指责他们没跟上你的版本时,这表明你缺乏同情心和对大局的理解。

一个框架的真正力量来自于它周围的社区和生态系统。

过去

如果你有幸在2015年前后写代码,你有可能会使用当时最主流的框架angularJS。

转到 Vue 3的看起来很像从 AngularJS 到 Angular(版本1⇒2)的过渡。大量的破坏性的变化导致了挫败感,最终Angular失去了对React和Vue的吸引力。

如果你是一个全栈工程师,你可能熟悉大约10年前在Python生态系统中发生的同样情况。在大约十年的时间里,许多项目无法升级,因为许多核心库没有增加对Python 3的支持,而出现的新库只支持Python 3。当然,后来的Python版本开始只在版本3上添加新的和闪亮的功能,这种混乱的情况还没有真正结束。

未来--这种情况会再次发生吗?

看起来前进的方向是向后退,把所有的东西都移植到迁移构建中,但是损害已经造成了,开发满意度看起来并不乐观,不能忽视。有远见地让框架参与进来是合理的,但开发经验是框架的核心职责之一。Vue 4应该考虑到整个生态系统,并提供一个迁移路径,否则它将成为没有人愿意使用的最佳框架。

到目前为止,你对Vue 3的迁移有什么经验?请在评论中分享你的想法和建议。

作者:Chris ,译者:小智  
原文:https://fadamais.medium.com/vue-3-was-a-mitake-that-we-should-not-repeat-81cc65484954

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/11852

相关推荐

Vue3 Hook 到底是啥黑魔法?

早就听说,React社区,已经全面拥抱Hook。Vue3的发布也支持了自定义Hook,作为只会Vue的前端小码农自然要去看看Vue3 Hook到底是啥黑魔法?

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

vue3在setup中通过$ref获取dom元素

在使用vue2的时候,我们需要获取dom元素,或者获取组件的相关方法属性,一般都是通过this.$refs[domName]的方式,但是在vue3的setup中是没有this的,那么如何获取$refs呢?

vue3对比vue2使用,代码解释最直观

对于大多数组件,Vue2和Vue3中的代码即使不完全相同,也是非常相似的。但是,Vue3支持片段,这意味着组件可以有多个根节点。这在呈现列表中组件以删除不必要的包装器div元素时特别有用。但是,在本例中,表单组件的两个版本都将只保留一个根节点

浅谈Vue3的watchEffect用途

vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项。他可以实现在一个属性变更的时候,去执行我们想要的行为

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!