640?wx_fmt=jpeg

尤大昨天在 Vue Toronto 的主题演讲中预览了 Vue 3 。通过利用现代浏览器支持的新功能,Vue 3 将成为我们已经了解和喜爱的Vue.js 的改进版本。

我们期待的 Vue 3 将会是:

  • 更快

  • 更小

  • 更容易维护

  • 更加友好

  • 更容易使用

当然,这个是每个框架、库的最终目标。

更快

虽然 Vue 已经非常快,但尤大认为 Vue 3 会更快。下面几点将是如何去做的:

1. 虚拟DOM重写

虚拟 DOM 从头开始重写,我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。

640?wx_fmt=jpeg

2. 优化 slots 的生成

目前在 Vue 中,当父组件重新渲染时,其子组件也必须重新渲染。使用Vue 3,可以单独重新渲染父级和子级。

640?wx_fmt=jpeg

3. 静态树提升(Static Tree Hoisting)

使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态的,然后将其提升,从而降低了渲染成本。它将能够跳过 patching 整棵树。

640?wx_fmt=jpeg

4. 静态属性提升
此外,我们可以期待静态属性提升,其中 Vue 3 将跳过不会改变的 patching 节点。

640?wx_fmt=jpeg

5. 基于 Proxy 的 Observation

目前,Vue 的响应式系统是使用带有 Object.defineProperty 的getter 和 setter。但是,Vue 3 将使用 ES2015 Proxy 作为其观察机制。这消除了以前存在的警告,使速度加倍,并使用了一半的内存。

640?wx_fmt=jpeg

为了继续支持 IE11,Vue 3 将发布一个支持旧观察机制和新代理版本的构建。

更小

Vue 已经非常小了,在运行时压缩了大约 20kb。但我们可以预期它会变得更加紧凑,对于新的核心运行时而言,为 10kb gzi 压缩。这将在很大程度上通过消除您不使用的库(也称为Tree Shaking)来实现。例如,如果您没有使用过渡元素,则不会包含它。

使其更具可维护性

虽然大多数 Vue 开发人员都没有在库本身上工作,但很高兴知道 Vue 3 将带来更可维护的源代码。它不仅会使用 TypeScript,而且许多包将被解耦,使所有内容更加模块化。

640?wx_fmt=jpeg

更容易与原生结合

运行时核心也将与平台无关,使得Vue可以更容易地与任何平台(例如Web,iOS或Android)一起使用。

运行时核心也将与平台无关,使得Vue可以更容易地与任何平台(例如Web,iOS或Android)一起使用。

想想 React

让您的生活更轻松

Observer 模块已被解压缩到自己的包中,允许您以新的方式使用它:

640?wx_fmt=jpeg

跟踪重新渲染的位置也会更容易。在他的演讲中,尤大做了一些实时编码,并展示了如何跟踪 Vue 应用程序(使用下面的代码)来找出触发组件重新渲染的内容。这在更大的应用程序和性能微调中非常有用。

640?wx_fmt=jpeg

Vue 3.0 还具有改进的 TypeScript 支持,允许在编辑器中进行新级别的类型检查和有用的错误和警告。

640?wx_fmt=jpeg

1. Hooks API

当我们需要在 Vue 中共享两个组件之间的行为时,我们通常使用Mixins。然而尤大正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题,并且更适合使用惯用的 Vue 代码。

尤大还是快,React 刚出觉得还不错,咱 Vue 也写一个。

2. 时间切片支持

当您有许多组件同时尝试重新渲染时,任何浏览器都可以开始爬行,从而使用户体验变得困难。

尤大展示了他正在尝试使用 Time Slicing,如果要处理用户交互,将 JS 执行分解为可以提供给浏览器的段。

640?wx_fmt=jpeg

总结

最后说下看法,尤大的愿景很好,基本是就是每个框架、库的愿景,差不多就是奥运精神:更高、更快、更强。

Vue 3.0 的改进,说实话,个人感觉没有太大的创新,很多还是更 React 学的,所以呢,要问我哪个框架更有前景,我还是觉得 React 更有前景,思想超前,每一个重大更新都是激动人心。

但是我没说 Vue 不好,github 上这么多星星也体现了他的价值,就想某宝和 PDD,PDD 上有的某宝也有,为啥很多人还要去 PDD 买呢,因为便宜,所以给消费水平低的这群人带来了很大便利。

解释:我没有说把 PDD 假货的事情拿来做比喻,仅仅是他们的盈利模式,受众人群。

希望各位 Vue 粉加油,学不动也要学,前端就是这样。老子学不动,也要学!

以上分析来自公号:前端桃园

Logo

前往低代码交流专区

更多推荐