2409vue,vue3.5更新

news/2024/9/18 17:22:05/ 标签: vue.js, 前端

原文

今天,很高兴地发布Vue3.5!

此次要版本不包含破坏更改,只包括内部改进和有用的新函数.这里包含一些亮点.

反应式系统优化

在3.5中,Vue的响应式系统经历了另一次重大重构,实现了更好性能并显著提高了(-56%)内存使用率而行为不变.

此重构还解决了在SSR时,因挂起计算而导致的过时计算值和内存问题.

此外,3.5还优化了大型深度响应式数组的响应性跟踪,有时会使此类操作速度提高10倍.

`ReactiveProps`析构

在3.5版本中稳定了响应时属性析构.现在默认启用该功能后,从<script setup>中的defineProps调用析构的变量,现在是响应式的.

注意,此特征通过利用js的本地默认值语法,大大简化了用默认值声明属性的过程:

//以前
const props = withDefaults(defineProps<{count?: numbermsg?: string}>(),{count: 0,msg: 'hello'}
)

现在:

const { count = 0, msg = 'hello' } = defineProps<{count?: numbermessage?: string
}>()

通过编译器会自动把访问析构变量(如计数)编译到props.count中,因此在访问时会跟踪它们.
类似props.count,监视析构的属性变量或给它传递到可组合项中并同时保留响应性,需要在取器中包装它:

watch(count /*...*/)
//^导致编译时错误
watch(() => count /*...*/)
//在取器中工作,
//组合应用`toValue()`来归一化输入
useDynamicCount(() => count)

对那些希望更好区分析构属性和普通变量的人,@vue/languagetools2.1提供了一个选入设置来为它们启用内联提示.

`SSR`改进

3.5为服务渲染(SSR)带来了一些期待已久的改进.

懒冻结

通过defineAsyncComponent()API的冻结选项指定策略,异步组件现在可控制何时应该冻结它们.如,要仅在组件可见时冻结组件:

import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const AsyncComp = defineAsyncComponent({loader: () => import('./Comp.vue'),hydrate: hydrateOnVisible()
})

核心API有意降级,Nuxt团队已在此函数上面构建了更高级的语法糖.这里

`useId()`

useId()是一个可生成每个应用,保证在服务器和客户渲染中保持稳定的唯一的ID的API.
它们可用来生成表单元素和助手函数属性的ID,且可在SSR应用中使用,而不会导致冻结不匹配:

<script setup>
import { useId } from 'vue'
const id = useId()
</script>
<template><form><label :for="id">Name:</label><input :id="id" type="text" /></form>
</template>

允许不匹配数据(data-allow-mismatch)

如果客户值不可避免地与其服务器对应值(如日期)不同,现在可用该属性抑制生成的冻结不匹配警告:

<span dataallowmismatch>{{ data.toLocaleString() }}</span>

还可为属性提供值限制允许的不匹配类型,其中可能的值为text,children,class,style和attribute.

自定义元素改进

3.5修复了许多与defineCustomElement()API相关的长期问题,并添加了许多使用Vue编写自定义元素的新能力:

1,configureApp选项支持自定义元素的应用配置.
2,新增useHost(),useShadowRoot()和this.$host接口,来访问自定义元素的主机元素和阴影根.

3,支持传递shadowRoot:false来挂载没有ShadowDOM的自定义元素.

4,支持通过自定义元素来附加到<style>标签上来提供nonce选项.
5,可通过第二个参数把这些新的仅限自定义元素的选项传递给defineCustomElement:
JS

import MyElement from './MyElement.ce.vue'
defineCustomElements(MyElement, {shadowRoot: false,nonce: 'xxx',configureApp(app) {app.config.errorHandler = ...}
})

其他显著功能

`useTemplateRef()`

3.5引入了一个通过useTemplateRef()API取模板引用的新方法:

<script setup>
import { useTemplateRef } from 'vue'
const inputRef = useTemplateRef('input')
</script>
<template><input ref="input">
</template>

在3.5前,建议使用变量名与静引用属性匹配的普通引用.旧方法要求引用属性可由编译器解析,因此仅限于静态引用属性.
相比之下,useTemplateRef()通过运行时串ID匹配引用,因此支持动态引用绑定到不断变化的ID.

@vue/languagetools2.1还特殊支持新语法,因此在使用useTemplateRef()时,会根据模板中是否有引用属性收到自动补全和警告:

懒传递

内置<Teleport>组件的一个已知约束是,在挂载Teleport组件时,必须要有目标元素.这阻止了用户在传递后传递内容到Vue渲染的其他元素.

在3.5中,为<Teleport>引入了一个延迟属性,它会在当前渲染周期后挂载它,所以如下现在可以工作了:

<Teleport defer target="#container">...</Teleport>
<div id="container"></div>

因为默认要后向兼容,此行为需要延迟属性.

`onWatcherCleanup()`

3.5引入了一个全局导入的API,onWatcherCleanup(),来在监视器中注册清理回调:

import { watch, onWatcherCleanup } from 'vue'
watch(id, (newId) => {const controller = new AbortController()fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {//回调逻辑})onWatcherCleanup(() => {//(中止过时请求)controller.abort()})
})