Vue.js 2023 年最新路线图

更新日期: 2023-02-14阅读: 818标签: vue

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

概述:

  • 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 阶段,距离正式发布又近了一步。



响应式 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 新年文章中简要介绍了 Vapor Mode:

受 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 团队的最终目标。我们可能会在第三季度至第四季度看到这一特性。

来源:前端充电宝(ID:FE-Charge)


链接: https://www.fly63.com/article/detial/12372

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

Vue响应式开发,深入理解Vue.js响应式原理

深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML

vue中慎用style的scoped属性

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量

基于vue移动端UI框架有哪些?vue移动端UI框架总汇

vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离

Vue2.0用户权限控制解决方案

Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

组件化的概念/特性/优点,Vue组件的使用

Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

点击更多...

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