Vue 3.5 即将到来:探索最新特性与性能提升

Vue 正在为 Vue 3.5 版本进行准备。这一新版本(目前处于 Alpha 阶段)带来了一系列的增强功能、新特性以及重要的改动,以提升开发者和用户的体验。根据官方的更新日志,我们来看看 Vue 3.5 中即将推出的内容。

github:https://github.com/vuejs/core/blob/minor/CHANGELOG.md

响应式属性解构

响应式属性解构已经处于实验状态大约一年了,但在 3.5 版本中,这一特性将作为稳定功能发布。这个功能允许你从 defineProps 宏中解构属性而不会失去响应性。

go 复制代码
import { watchEffect } from 'vue'

const { count } = defineProps(['count'])

watchEffect(() => {
  // 每次父组件中的 count 属性变化时都会触发这个日志
  console.log(count)
})

尤雨溪 说:"几乎所有在真实项目中大规模使用 [响应式属性解构] 的开发者都反馈了积极的意见。他们表示,非常喜欢这个功能......希望它能稳定下来。"

对于那些不想使用这一功能的开发者,可以通过一个标志将其关闭。

go 复制代码
// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        propsDestructure: false
      }
    })
  ]
}

useTemplateRef

当前声明模板引用的过程如下:

go 复制代码
<script setup>
// 首先定义一个值为 undefined 或 null 的 ref
// 并将生成的变量命名为你想要的名字
const divEl = ref();
</script>

<template>
<!-- 然后在模板中使用与变量相同的名字作为 `ref` 属性的值 -->
<div ref="divEl" ></div>
</template>

这种方法有两个问题:

  1. 有时令人困惑。divEl 是响应式数据还是 DOM 元素?如果你有命名模板引用的惯例,这还不算糟,但最终你必须在模板中找到匹配的 ref= 才能确定。

  2. 这也限制了你只能在组件脚本 setup 部分中定义模板引用。这意味着希望访问 DOM 元素的组合函数必须接受模板引用作为参数。

现在使用 useTemplateRef 可以解决这两个问题。

go 复制代码
// MyComposable
export const useMyComposable = (options = {
  templateRef: 'el'
})=>{
  // 由于函数名称的缘故,这显然是一个模板引用 👇 
  const theEl = useTemplateRef(options.templateRef);
}

// MyComponent
<script setup>
// 无需在组件中定义模板引用
// 这可以交给组合函数来处理
useMyComposable()
useMyComposable({ templateRef: 'el2' })
</script>
<template>
<div ref="el"></div>
<div ref="el2"></div>
</template>

useId

新的 useId 实用组合函数返回一个在服务器渲染和客户端渲染之间稳定的唯一 ID(这样可以减少应用中出现水合不匹配的风险)。这对于表单元素的 forid 属性以及可访问性属性非常有用。

go 复制代码
<!--MyCustomInput-->
<script setup>
defineProps({
  label: String,
  help: String
  //...
})

const inputId = useId();
const helpTextId = useId();
</script>
<template>

<label :for="inputId">{{label}}</label>
<input :id="inputId" :aria-describedby="helpTextId"/>
<p :id="helpTextId">{{ help }}</p>

</template>

内存改进 === 更快的应用

据 尤雨溪 说,"第一个显著的变化是内部响应性重构的第二次尝试。"重构意味着内存使用量减少了 60%,这对于任何处理大型响应式数据数组的应用来说都是一个巨大的胜利。实际上,Vue 团队特别优化了许多常见的数组方法,使得遍历数组的速度提高了多达 10 倍。

你可以在 DejaVue 播客的《The Future of Vue.js》这一集中听到 Evan 自己的介绍,或者查看更新日志以获取更多信息。

博客地址:https://www.youtube.com/watch?v=xvkf3KOaRlQ\&t=890s

与 SSR 相关的改进

尽管这些内容还未写入更新日志,Evan 提到其他与 SSR 相关的改进正在进行中,包括:

  • 使用异步组件作为边界进行延迟水合。这意味着你将能够在定义异步组件时指定何时将用于客户端水合组件的 JavaScript 发送到浏览器。

  • 有选择地允许水合不匹配,使处理客户端和服务器之间从未期望相同的数据(如日期)变得更容易。

结论

这些只是 Vue 下一个次版本(Vue 3.5)中一些令人期待的亮点。其他的 bug 修复和新特性还包括:

  • 更好的属性类型推断

  • 支持在 Transition 内直接嵌套 Teleport

  • app.onUnmount() 用于注册清理函数

  • onScopeDisposefailSilently 参数

  • 以及更多!

查看更新日志,并且如果你对此版本感到好奇,一定要看看这期播客!

更新日志地址:https://github.com/vuejs/core/blob/minor/CHANGELOG.md

最后:

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读

相关推荐
懒大王爱吃狼35 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript