Vue Amsterdam 2023 于 2 月 8 日至

lxf2023-03-16 17:14:01

Vue Amsterdam 2023 于 2 月 8 日至 10 日举办(Vue Amsterdam 是世界上最大的 Vue.js 大会),这也是 Vue.js 创作者尤雨溪三年以来首次参加零距离 Vue 主题活动。在会议中,尤雨溪提及了 Vue 的一些令人激动的特色功能,并提供了 2023 路线地图的更新。

Vue Amsterdam 2023 于 2 月 8 日至

简述:

  • 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 环节,间距正式公布应当只差一步。

Vue Amsterdam 2023 于 2 月 8 日至

响应式网站 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:

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 团队终极目标。我们可能会在第三季度至第四季度见到这一点。