响应系统优化
在 3.5 中,Vue 的响应性系统经历了另一次重大重构,实现了更好的性能并显着提高了内存使用率 (-56%),而行为没有变化。此重构还解决了在 SSR 期间因挂起计算而导致的过时计算值和内存问题。
此外,3.5 还优化了大型深度响应式数组的响应性跟踪,在某些情况下使此类操作的速度提高了 10 倍。
Reactive Props 解构
Reactive Props Destructure 在 3.5 中得到了稳定。现在默认启用该功能后,从调用中解构的变量现在是响应式的。值得注意的是,此功能通过利用 JavaScript 的原生默认值语法,大大简化了使用默认值声明 props:defineProps
<script setup>
更新前
const props = withDefaults(
defineProps<{
count?: number
msg?: string
}>(),
{
count: 0,
msg: 'hello'
}
)
更新后
const { count = 0, msg = 'hello' } = defineProps<{
count?: number
message?: string
}>()
对解构变量(例如 )的访问由编译器自动编译,因此在访问时会跟踪它们。与 类似,监视解构的 prop 变量或将其传递到可组合项中同时保留响应性需要将其包装在 getter 中:count
props.count
props.count
watch(count /* ... */)
// ^ results in compile-time error
watch(() => count /* ... */)
// ^ wrap in a getter, works as expected
// composables should normalize the input with `toValue()`
useDynamicCount(() => count)
对于那些喜欢更好地区分解构 props 和普通变量的人,2.1 提供了一个 opt-in 设置来为它们启用 inlay 提示:@vue/language-tools
详:
SSR 改进
3.5 为服务器端渲染 (SSR) 带来了一些期待已久的改进。
懒加载水合
异步组件现在可以通过在 API 选项中指定策略来控制何时应该进行水合。例如,要仅在组件变得可见时水合组件:hydrate
defineAsyncComponent()
import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const AsyncComp = defineAsyncComponent({
loader: () => import('./Comp.vue'),
hydrate: hydrateOnVisible()
})
核心 API 有意降低级别,Nuxt 团队已经在此功能之上构建了更高级别的语法糖。
详细信息:PR#11458
useId()
useId()
是一个 API,可用于生成每个应用程序的唯一 ID,这些 ID 保证在服务器和客户端渲染中保持稳定。它们可用于生成表单元素和辅助功能属性的 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>
详细信息:PR#11404
data-allow-mismatch
如果客户端值不可避免地与其服务器对应值(例如日期)不同,我们现在可以使用属性来抑制由此产生的水合不匹配警告:data-allow-mismatch
<span data-allow-mismatch>{{ data.toLocaleString() }}</span>
您还可以通过为属性提供值来限制允许的不匹配类型,其中可能的值为 、 和 。text
children
class
style
attribute
自定义元素改进
3.5 修复了许多与 API 相关的长期问题,并添加了许多使用 Vue 编写自定义元素的新功能:defineCustomElement()
- 通过选项支持自定义元素的应用程序配置。
configureApp
- 添加 、 和 API 用于访问自定义元素的 host 元素和 shadow 根。
useHost()
useShadowRoot()
this.$host
- 支持在没有 Shadow DOM 的情况下通过传递 .
shadowRoot: false
- 支持提供一个选项,该选项将附加到自定义元素注入的标签上。
nonce
<style>
这些新的仅限自定义元素的选项可以通过第二个参数传递给:defineCustomElement
import MyElement from './MyElement.ce.vue'
defineCustomElements(MyElement, {
shadowRoot: false,
nonce: 'xxx',
configureApp(app) {
app.config.errorHandler = ...
}
})
其他
useTemplateRef()
3.5 引入了一种通过 API 获取模板引用的新方法:useTemplateRef()
<script setup>
import { useTemplateRef } from 'vue'
const inputRef = useTemplateRef('input')
</script>
<template>
<input ref="input">
</template>
在 3.5 之前,我们建议使用变量名称与 static 属性匹配的普通 refs。旧方法要求编译器可以分析属性,因此仅限于静态属性。相比之下,通过运行时字符串 ID 匹配 refs,因此支持动态 ref 绑定到更改的 ID。ref
ref
ref
useTemplateRef()
@vue/language-tools
2.1 还实现了对新语法的特殊支持,因此在使用 based of of attributes 时,你会得到自动补全和警告 file file 在你的模板中useTemplateRef()
ref
延迟传递
内置组件的一个已知约束是,在挂载 teleport 组件时,其 target 元素必须存在。这阻止了用户在传送后将内容传递到 Vue 渲染的其他元素。<Teleport>
在 3.5 中,我们引入了一个 prop,它会在当前渲染周期之后挂载它,所以这现在可以工作了:defer
<Teleport>
<Teleport defer target="#container">...</Teleport>
<div id="container"></div>
此行为需要 prop,因为默认行为需要向后兼容。defer
详细信息:PR#11387
onWatcherCleanup()
3.5 引入了一个全局导入的 API onWatcherCleanup(),用于在 watcher 中注册清理回调:
import { watch, onWatcherCleanup } from 'vue'
watch(id, (newId) => {
const controller = new AbortController()
fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
// callback logic
})
onWatcherCleanup(() => {
// abort stale request
controller.abort()
})
})
有关 3.5 中更改和功能的完整列表,请查看 GitHub 上的完整更改日志。