深圳极速网站建设报价,企业解决方案有哪些,seo诊断的网络问题,广州开发网站哪家专业官网#xff1a;Announcing Vue 3.5 | The Vue Point
2024年9月1日#xff0c;宣布 Vue 3.5“天元突破#xff1a;红莲螺岩”发布#xff01;
反应系统优化
在 3.5 中#xff0c;Vue 的反应系统经历了另一次重大重构#xff0c;在行为没有变化的情况下实现了更好的性能…官网Announcing Vue 3.5 | The Vue Point
2024年9月1日宣布 Vue 3.5“天元突破红莲螺岩”发布
反应系统优化
在 3.5 中Vue 的反应系统经历了另一次重大重构在行为没有变化的情况下实现了更好的性能和显著改善的内存使用率-56%。重构还解决了 SSR 期间计算值挂起导致的过时计算值和内存问题。此 PR 重构了核心反应系统以使用版本计数和受Preact 信号启发的双向链表数据结构。
此外3.5 还优化了大型、深度反应阵列的反应性跟踪在某些情况下可使此类操作速度提高 10 倍。
内存使用改进
给定一个有 1000 个引用 2000 个计算1000 个链接对 1000 个订阅最后一个计算的效果的测试用例比较这些类实例使用的总内存
之前3.4.191426k之后此 PR631k-56%
计算现在也仅在自身获得第一个订阅者时才延迟订阅 deps并在失去所有订阅者时取消订阅。这意味着它们可以更可靠地进行垃圾收集包括在 SSR 中。
响应式 Props 解构
在 Vue 3.5 中响应式 props 的解构功能已经稳定下来并且默认启用。这意味着在 script setup 中从 defineProps 解构的变量现在具有响应性。这一改进大大简化了使用默认值声明 props 的过程并且利用了 JavaScript 的原生默认值语法。
templatedivpName: {{ name }}/ppAge: {{ age }}/pbutton clickincrementAgeAge 1/button/div
/templatescript setup
import { ref, watch } from vue;// 定义属性
const props defineProps({name: {type: String,default: John},age: {type: Number,default: 30}
});// 创建响应式数据
const age ref(props.age);// 监听属性变化
watch(() props.age, (newAge) {age.value newAge;
});// 更新年龄的方法
const incrementAge () {age.value;
};
/script
解构 props 变量例如 count的访问会被编译器自动编译成 props.count从而保持响应性。这意味着当我们访问解构后的变量时Vue 会自动对其进行跟踪。 如果需要在保留响应性的同时监视解构的 prop 变量或将其传递到可组合函数中需要将其包装在 getter 中。这一改进使得处理 props 变得更加直观和高效。
这一改进大大简化了代码使得 props 的声明和使用更加直观和简洁。我们不再需要使用 toRefs 或其他复杂的模式来保持响应性。
SSR 改进
在 Vue 3.5 中服务器端渲染SSR得到了一些重要的改进特别是在懒惰水合、useId() API 和 data-allow-mismatch 属性方面。这些改进旨在提高 SSR 的性能、稳定性和开发体验。
懒惰水合Lazy Hydration
控制水合策略
在 Vue 3.5 中异步组件的水合策略可以通过 defineAsyncComponent API 的 hydrate 选项来控制。懒惰水合是指组件在首次渲染时不会立即进行水合hydration而是在某些条件满足时例如组件可见时才进行水合。
import { defineAsyncComponent } from vue;const LazyComponent defineAsyncComponent({loader: () import(./MyComponent.vue),hydrate: {when: visible, // 仅在组件可见时进行水合},
});
核心 API 设计得较低级别而 Nuxt 团队已在此特性的基础上构建了更高级别的语法糖使得懒惰水合的实现更加简单和直观。
useId() API
useId() 是一个 API可用于生成每个应用程序唯一的 ID。这些 ID 在服务器和客户端渲染过程中保持稳定确保不会导致水合不匹配。
import { useId } from vue;const uniqueId useId();
应用场景
这些唯一 ID 可用于生成表单元素和可访问性属性的 ID确保在 SSR 应用程序中使用时不会导致水合不匹配。
data-allow-mismatch 属性
抑制水合不匹配警告在某些情况下客户端值不可避免地与服务器对应值不同例如日期。Vue 3.5 引入了 data-allow-mismatch 属性用于抑制由此产生的水合不匹配警告。
div data-allow-mismatch!-- 内容 --
/div
还可以通过为 data-allow-mismatch 属性提供值来限制允许的不匹配类型。可能的值包括 text、children、class、style 和 attribute。
div data-allow-mismatchtext!-- 内容 --
/div
自定义元素改进
在 Vue 3.5 中自定义元素Custom Elements得到了显著的改进修复了许多与 defineCustomElement API 相关的长期存在的问题并添加了许多新功能。这些改进使得使用 Vue 创建自定义元素更加灵活和强大。
自定义元素的应用程序配置
通过选项支持自定义元素的应用程序配置在 Vue 3.5 中你可以通过 configureApp 选项来配置自定义元素的应用程序。这使得你可以在定义自定义元素时进行更细粒度的配置。
import { defineCustomElement } from vue;const MyElement defineCustomElement({// 组件选项template: divHello, World!/div,configureApp: (app) {// 配置应用程序app.config.globalProperties.$myGlobal global value;},
});customElements.define(my-element, MyElement);
访问宿主元素和影子根
添加 useHost()、useShadowRoot() 和 this.$host APIVue 3.5 添加了 useHost() 和 useShadowRoot() 组合函数以及 this.$host API用于访问自定义元素的宿主元素和影子根。
import { defineCustomElement, useHost, useShadowRoot } from vue;const MyElement defineCustomElement({setup() {const host useHost();const shadowRoot useShadowRoot();console.log(Host Element:, host.value);console.log(Shadow Root:, shadowRoot.value);return () divHello, World!/div;},
});customElements.define(my-element, MyElement);
支持安装没有 Shadow DOM 的自定义元素
通过传递 shadowRoot: false 支持安装没有 Shadow DOM 的自定义元素在 Vue 3.5 中你可以通过传递 shadowRoot: false 选项来支持安装没有 Shadow DOM 的自定义元素。
import { defineCustomElement } from vue;const MyElement defineCustomElement({template: divHello, World!/div,shadowRoot: false, // 不使用 Shadow DOM
});customElements.define(my-element, MyElement);
支持提供 nonce 选项
支持提供一个 nonce 选项该选项将附加到 style 自定义元素注入的标签上Vue 3.5 支持提供一个 nonce 选项该选项将附加到 style 自定义元素注入的标签上以增强安全性。
import { defineCustomElement } from vue;const MyElement defineCustomElement({template: divHello, World!/div,nonce: my-nonce-value, // 设置 nonce 值
});customElements.define(my-element, MyElement);
仅自定义元素选项
通过第二个参数传递仅自定义元素选项在 Vue 3.5 中你可以通过第二个参数传递仅自定义元素选项以进一步定制自定义元素的行为。
import { defineCustomElement } from vue;const MyElement defineCustomElement({template: divHello, World!/div,},{shadowRoot: false, // 不使用 Shadow DOMnonce: my-nonce-value, // 设置 nonce 值}
);customElements.define(my-element, MyElement);
其他显著特点
useTemplateRef() API
获取模板引用的新方法
Vue 3.5 引入了一种通过 useTemplateRef() API 获取模板引用的新方法。这种方法通过运行时字符串 ID 匹配引用因此支持动态引用绑定到变化的 ID。
templatedivinput refinputRef typetext //div
/templatescript setup
import { useTemplateRef } from vue;const inputRef useTemplateRef(inputRef);console.log(inputRef.value); // 获取 input 元素的引用
/script
与旧方法的对比
在 3.5 之前我们建议使用变量名与静态 ref 属性匹配的普通引用。旧方法要求 ref 属性可由编译器分析因此仅限于静态 ref 属性。相比之下useTemplateRef() 通过运行时字符串 ID 匹配引用因此支持动态引用绑定到变化的 ID。
语言工具支持
vue/language-tools 2.1 还实现了对新语法 useTemplateRef() 的特殊支持因此在使用时您将根据 ref 模板中存在的属性获得自动完成和警告。
延迟传送Deferred Teleport
内置 Teleport 组件的限制
内置 Teleport 组件的一个已知限制是其目标元素必须在传送组件挂载时存在。这阻止用户在传送后将内容传送到 Vue 渲染的其他元素。
引入 defer prop
在 Vue 3.5 中我们引入了一个 defer prop用于在当前渲染周期之后挂载 Teleport因此现在可以正常工作
templatedivTeleport to#target deferdivTeleported Content/div/Teleport/div
/templatescript setup
import { Teleport } from vue;
/script
默认行为
此行为需要 defer prop因为默认行为需要向后兼容。
onWatcherCleanup() API
在观察者中注册清理回调
Vue 3.5 引入了一个全局导入的 API onWatcherCleanup()用于在观察者中注册清理回调。
import { watch, onWatcherCleanup } from vue;watch(() someValue,(newValue, oldValue, onCleanup) {const cleanup () {// 清理逻辑};onWatcherCleanup(cleanup);}
);
应用场景
onWatcherCleanup() 可以在观察者中注册清理回调确保在观察者被停止或重新运行时执行清理逻辑避免内存泄漏和其他潜在问题。
