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

最新推荐文章于 2024-09-19 17:51:04 发布

@大迁世界

最新推荐文章于 2024-09-19 17:51:04 发布

阅读量1.2k

点赞数 5

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/qq449245884/article/details/141835740

版权

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

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

响应式属性解构

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

import { watchEffect } from 'vue'

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

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

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

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

// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        propsDestructure: false
      }
    })
  ]
}

`useTemplateRef`

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

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

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

这种方法有两个问题：

有时令人困惑。divEl 是响应式数据还是 DOM 元素？如果你有命名模板引用的惯例，这还不算糟，但最终你必须在模板中找到匹配的 ref= 才能确定。
这也限制了你只能在组件脚本 setup 部分中定义模板引用。这意味着希望访问 DOM 元素的组合函数必须接受模板引用作为参数。

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

// 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（这样可以减少应用中出现水合不匹配的风险）。这对于表单元素的 for 和 id 属性以及可访问性属性非常有用。

<!--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>