本文主要是介绍2409vue,vue3.5更新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文
今天,很高兴地发布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()})
})
这篇关于2409vue,vue3.5更新的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
