Vue.js 2023 年最新路线图

简介: Vue.js 2023 年最新路线图

Vue Amsterdam 2023 于 2 月 8 日至 10 日举行(Vue Amsterdam 是世界上最大的 Vue.js 会议),这是 Vue.js 作者尤雨溪三年以来首次参加面对面 Vue 活动。在会议中,尤雨溪透露了 Vue 的一些令人兴奋的新功能,并提供了 2023 路线图的更新。

22.webp.jpg

概述:

  • Vue 2 将于 2023 年 12 月 31 日结束支持,达到生命周期结束(EOL);
  • Reactivity Transform 将从 v3.4 中的 Vue 核心中移除;
  • 响应式 props 解构;
  • Suspense 将于 Q2 确定;
  • 更多 SSR 改进,包括懒水合、v-ssr-only;
  • Vapor mode:一种可选择的以性能为导向的编译模式。

Vue 2 EOL

为了弥补个和主要版本之间的差距,Vue 2.7 添加了内置的 Composition API 支持以及 <script setup> 功能。这也是为了减少升级到 Vue 3 的工作量。

最新的 Vue 2.7 是最终的 2.x 版本。这意味着 Vue 2 将不再计划发布新功能。但是,直到今年年底,它仍将获得对错误修复和安全修复的必要支持。

2023 年 12 月 31 日之后,Vue 团队将不再维护 Vue 2。官方文档中有相关的详细说明,其中包括如果不打算迁移到 Vue 3 可以怎么做。其中一个选项是查看 HeroDevs,因为它们将支持 Vue 2。

放弃 Reactivity Transform

当使用 ref 使某些对象具有响应式时,可以为其分配一个新值并通过 .value 访问它:

const count = ref(0)
console.log(count.value)   // 0

本质上,Reactivity Transform 允许我们在编写响应式代码时省略 .value。 默认情况下,它是禁用的,因为它仍然是 RFC 中的实验性功能。

Vue 团队已经决定在未来几个月内逐步淘汰它。原因之一是 DX 改进非常有限。 没有 .value,响应式变量和非响应式变量之间的区别就丢失了,这不可避免地引入了另一种心智负担。

如果你现有的代码库中使用了 Reactivity Transfom,将从 v3.3 开始收到弃用警告。到 v3.4 时,它将完全从 Vue 核心包中移除。但是,仍然可以从 Vue macros 中使用它。

:目前 Vue.js v3.3 已经处于 v3.3.0-alpha.4 阶段,距离正式发布应该不远了。

33.webp.jpg


响应式 props 解构


尽管 Reactive Transform 没有通过 RFC,但它还是产生了一些有用的功能,这就是响应式 props 解构。

目前,当我们像这样使用 defineProps 解构 props 时,响应式会丢失:

const { count } = defineProps<{ count: number }>();

因此,要么需要使用 props.x,要么使用 toRefs

const props = defineProps<{ count: number }>(); 
const { count } = toRefs(props);

使用响应式 props 解构,我们可以忘记这些并以最常见的 JS 方式简单地解构它,甚至可以像这样分配一个默认值:

const { count = 1 } = defineProps<{ count: number }>();

注: 目前,响应式 props 解构是 Reactivity Transform RFC 的一部分,但正如尤雨溪在会议中提到的那样,它可能会被拆分成一个单独的功能,并且很可能会作为一个新功能包含在未来的 Vue 版本中。


SSR 改进


在与 Nuxt 团队的协调下,Vue 团队将在第二季度专注于 SSR 的改进。这包括完成目前仍处于实验模式的 Suspense 功能。

简单来说,Suspense 是一个内置组件,它提供了一种在等待嵌套异步组件解析时显示顶层加载/错误状态的解决方案。 没有它,我们必须分别处理每个异步组件的状态。

除此之外,可以期待看到引入懒水合作用。 这个想法是让我们定义自定义策略,以了解我们希望异步组件树如何水合,例如,仅在某些组件滚动到视图中时才水合它们。

v-ssr-only 是 Vue 团队正在探索的另一个新特性。这将允许我们将特定模板声明为仅服务端渲染。当对一个模板进行动态绑定时,这会很有用,因为该模板中的数据是从数据库中提取的,但在客户端它永远不会改变。在这种情况下,当客户端构建完成时,编译可以以不同的方式完成,忽略所有动态绑定,这样它就不必在水合作用期间做任何工作。


Vapor Mode


在此之前,关于 Vue 团队正在探索的这个看似令人兴奋的新功能的信息并不多。今年年初,尤雨溪在他的 2023 新年文章中简要介绍了它:

受 solid.js 的启发,Vapor Mode 提供了另外一种编译策略。 它将 Vue SFC 编译成 JavaScript 输出,与当前基于虚拟 DOM 的输出相比,该输出具有更高的性能、使用更少的内存并且需要更少的运行时支持代码。

听起来很酷,所有这些都可以在不对现有代码库进行太多更改的情况下完成。

在 Vue Amsterdam 的演讲中,有一些关于如何选择加入 Vapor Mode 的新细节。 有两种方法可以做到这一点:

(1)在组件级别通过包含 .vapor 文件名后缀,例如 Counter.vapor.vue

<script setup>
import Counter from './Counter.vapor.vue' 
</script>
<template>
  <Counter>
</template>

(2)在应用级别,通过删除 VDOM interop:

j

import { createApp } from 'vue/vapor'
import App from './App.vapor.vue'
createApp(App).mount('#app')

使用 Vapor Mode,组件可以被编译成一个函数调用,我们可以不再担心拥有太多组件和创建这些组件实例所带来的内存开销。

一开始,Vapor Mode 旨在仅支持 Vue API 的一个子集(<script setup> 和 Composition API)以获得最佳性能。因此,计划是使 Vapor Mode 与任何其他现有的非 Vapor Mode 完全兼容。实现自由混合使用(在非 Vapor 组件中使用 Vapor 组件,反之亦然)也是 Vue 团队的最终目标。我们可能会在第三季度至第四季度看到这一点。

相关文章
|
JSON Rust JavaScript
Deno 2021 回顾:优化 Deno 内核、兼容 Node.js、Deno 2 路线图将至
Deno 2021 回顾:优化 Deno 内核、兼容 Node.js、Deno 2 路线图将至
274 0
Deno 2021 回顾:优化 Deno 内核、兼容 Node.js、Deno 2 路线图将至
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
27 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
106 2
|
1月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
20 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
155 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
90 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
80 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
100 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
93 3
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
75 3