文章目录
Props 变化
响应式Props解构赋值 【直接解构，不丢失响应性】
以前我们对Props直接进行解构赋值是会失去响应式的，需要配合使用toRefs或者toRef解构才会有响应式，那么就多了toRefs或者toRef这工序，而最新Vue3.5版本已经不需要了。
<template><div>{{ testCount }}</div>
</template><script setup>import { defineProps, toRef, toRefs } from 'vue';const props = defineProps({testCount: {type: Number,default: 0,},});// 过去正确做法// 直接 const { testCount } = props，不使用toRefs、toRef，失去响应性const { testCount } = toRefs(props);// 或者const testCount = toRef(props, 'testCount');
</script>
最新写法，不借助”外力“直接解构，依然保持响应式
<template><div>{{ testCount }}</div>
</template><script setup>import { defineProps } from 'vue';const { testCount } = defineProps({testCount: {type: Number,},});</script>
Props默认值新写法
以前默认值都是用 default: 去设置，现在不用了，现在只需要解构的时候直接设置默认值，不需要额外处理。
<template><div>{{ props.testCount }}</div>
</template><script setup>import { defineProps } from 'vue';const props = defineProps({// 过去默认值设置方式testCount: {type: Number,default: 1},});// 最新方式const { testCount=18 } = defineProps({testCount: {type: Number,},});
</script>
实际就是使用 js 的默认值语法，使用解构就行了。
const { count = 0, msg = 'hello' } = defineProps<{count?: numbermessage?: string
}>()
响应式系统优化
在 3.5 中，Vue 的反应性系统经历了另一次重大重构，实现了更好的性能并显着提高了内存使用率 ( -56% )，而行为没有变化。重构还解决了 SSR 期间因计算挂起而导致的陈旧计算值和内存问题。
此外，3.5 还优化了大型、深度反应阵列的反应跟踪，在某些情况下使此类操作速度提高了 10 倍。
主要提升了性能和内存使用效率。
1. 依赖追踪与减少不必要的更新
关键变化：
- Vue 3.5 优化了对依赖的追踪方式，减少了不必要的依赖追踪步骤。这意味着当某个数据发生变化时，只有真正依赖于这个数据的组件或部分会被更新，而不是无关紧要的部分也受到影响。
- 通过更加细粒度的依赖管理，Vue 3.5 避免了不必要的渲染，提升了应用的性能，尤其是在处理大量数据或深层嵌套结构时表现尤为显著。
举例： 如果一个组件中的某个计算属性依赖于一个复杂对象的某个属性变化，以前的版本可能会因为某些次要变化导致整个对象被重新渲染。而在 Vue 3.5 中，只有依赖的属性发生变化，才会触发更新。
2. 内存使用优化
Vue 3.5 中的内存管理经过了进一步优化，尤其是在处理大型数据集时，通过减少冗余的内存占用，大幅度降低了内存消耗。
内存优化的关键技术点：
- 减少代理对象的开销：Vue 的响应式系统通过
Proxy实现数据的双向绑定与变化追踪。在 Vue 3.5 中，代理的实现变得更加高效，减少了对不必要对象的追踪，从而减少了内存占用。 - 缓存和优化依赖收集：Vue 3.5 中改进了对依赖项的缓存策略，在一些大规模数组或嵌套对象的处理过程中，依赖项的缓存减少了重复的依赖收集步骤，从而节省了内存。
效果： 根据官方说明，Vue 3.5 的内存使用可以减少56%，这在处理复杂应用时尤其明显。
3. 响应式数组和深度嵌套对象的处理优化
在 Vue 3.5 中，处理大规模嵌套数据的效率得到了显著提升。例如，数组的深度监听、遍历操作等在新版本中优化了 10 倍左右。这一优化主要得益于以下几方面：
- 批量处理操作：Vue 3.5 通过批量处理数组或嵌套对象中的变化，减少了每个单独操作的开销。例如，在 Vue 3.5 中，如果对一个大数组进行了多次操作，Vue 会进行批量处理，减少了每次操作引发的性能开销。
- 依赖追踪的优化：Vue 3.5 针对深层嵌套的对象优化了依赖追踪逻辑，使得深层次的属性变化能够更高效地进行处理，而不是每次小的变化都触发整个对象的重新追踪和渲染。
4. 垃圾回收与响应式数据的清理
Vue 3.5 的响应式系统还改进了对于无用依赖的清理，即当某个响应式数据不再被使用时，它的依赖关系会被及时清理，减少内存泄漏的风险。这在长时间运行的应用或频繁创建和销毁组件的场景中，极大提高了内存管理的效率。
5. 简化的响应式 API
Vue 3.5 中对响应式 API 进行了改进，使得开发者可以更灵活地使用响应式功能，减少不必要的复杂性。例如，开发者可以通过简化的 API 更轻松地创建响应式数据结构，适应不同的开发需求，同时优化底层的性能。
`reactive` 和 `ref` 的改进
**reactive**：用于将对象转换为响应式对象。- 示例：
const state = reactive({count: 0,user: {name: 'John',age: 30}
});
ref：用于将基本数据类型或单个值变成响应式数据。- 示例：
const count = ref(0);
const name = ref('Vue 3.5');
在 Vue 3.5 中，ref 和 reactive 的内部优化使得数据追踪更加高效，减少了不必要的内存占用和性能开销。
`shallowReactive` 和 `shallowRef` 的优化
Vue 3.5 提供了 shallowReactive 和 shallowRef，这两个 API 只对第一层的属性进行响应式处理，不对深层嵌套的属性进行响应式追踪。
shallowReactive：适用于只希望追踪对象的浅层属性变化，而不需要深度追踪。- 示例：
const shallowState = shallowReactive({name: 'Vue',settings: { theme: 'dark' }
});
// 只追踪 `name` 的变化，不会自动追踪 `settings` 的变化。
shallowRef：适用于只对值的第一层进行响应式处理的场景。- 示例：
const shallowCount = shallowRef(0);
这些 API 非常适合那些不需要深度监听、只需对某一层数据进行响应式处理的场景，提升了应用的性能。
`shallowRef` 的特点和使用场景
- 只追踪引用变化：
shallowRef只追踪对象、数组等复杂数据类型的引用变化，而不会对对象内部的属性变化进行响应式处理。比如，当对象的引用改变时，Vue 会触发重新渲染，但如果只是修改对象内部的某个属性，视图不会更新。
示例：
import { shallowRef } from 'vue';const state = shallowRef({user: {name: 'John',age: 30}
});// 更新引用：视图更新
state.value = { user: { name: 'Alice', age: 25 } }; // 视图会重新渲染// 修改内部属性：不会触发视图更新
state.value.user.name = 'Bob'; // 视图不会重新渲染
在这个例子中，虽然 state.value.user.name 发生了变化，但由于 shallowRef 只对 state.value 的引用进行追踪，内部的属性变化不会触发视图更新。
- 性能优化场景：
shallowRef非常适合用于性能优化，特别是当你处理一个包含大量数据的对象或数组，但并不需要深度监听其所有属性变化的场景。例如，对于只关心对象本身的变化，而不关心其内部属性的变化，shallowRef是理想的选择。
示例应用场景：
- 你正在处理一个包含大量数据的表单，表单对象内部有很多属性。为了提高性能，只对表单对象的整体引用进行响应式追踪，而不对每个属性的变化进行追踪。
- 你需要使用某些第三方库的数据对象，而这些对象内部会经常变化，但你并不希望每次内部属性变化都导致 Vue 组件的重新渲染。
- 手动更新深层数据： 如果你使用
shallowRef，但偶尔需要手动更新某些深层数据，可以通过重新赋值的方式更新整个对象，以确保视图重新渲染。
示例：
const state = shallowRef({ count: 0 });// 更新内部属性
state.value.count = 10;// 需要手动触发视图更新
state.value = { ...state.value };
在这种情况下，手动重新赋值可以强制 Vue 重新追踪并更新视图。
`shallowRef` 和 `ref` 的区别
| 特性 | ref | shallowRef |
|---|---|---|
| 响应式深度 | 深度响应式（递归监听嵌套属性） | 浅层响应式（只监听引用变化） |
| 性能 | 对复杂数据可能有性能开销 | 性能更好，适合大数据对象 |
| 适用场景 | 需要对对象内部属性进行监听 | 只需对对象引用变化进行监听 |
Watcher API 增强
watch 和 watchEffect 现在可以暂停和恢复，进一步增强了状态管理的灵活性。此外，deep 选项现在可以指定具体的监听深度
Pause（暂停）和 Resume（恢复）Watcher
在之前的 Vue 版本中，Watcher 一旦开始运行，只能“停止”，没有“暂停”或“恢复”功能。而 Vue 3.5 为 watch 和 watchEffect 添加了 暂停 和 恢复 功能。
举个例子： 假设你有一个监听器 watch，它一直在观察某个数据对象 obj，并在该数据改变时执行某些逻辑。如果在某些情况下你不希望它继续工作，而是暂时“暂停”监听，Vue 3.5 就可以通过 pause() 和 resume() 方法来实现：
const { pause, resume, stop } = watch(obj, () => {console.log('obj changed');
});
pause(); // 暂停监听
resume(); // 恢复监听
stop(); // 停止监听
场景解释：比如你正在做一个数据频繁变化的操作，在某个时间段你希望暂停这些变化（例如为了性能优化），此时可以使用 pause() 来暂停监听，等你准备好后再通过 resume() 恢复监听。
深度监听（Deep Watch）增强
在 Vue 中，我们可以使用 watch 来监听对象的变化，尤其是嵌套的对象。以前的 deep 选项让我们可以监听对象内部所有层级的变化，但 Vue 3.5 新增了对特定深度的监听功能，你可以指定想监听的嵌套层级。
举个例子：
const obj = ref({ super: { nested: { prop: 1 } } });
watch(obj, () => {console.log('nested prop changed');
}, { deep: 1 }); // 这里监听嵌套的第一层变化
场景解释：如果你只关心对象的某些特定层级的变化，而不想每一层的改动都触发监听，这样的控制可以更高效地处理数据。
onWatcherCleanup 新增的清理功能
onWatcherCleanup 是一个全新的 API，用于在 watch 或 watchEffect 被清理时调用某个回调函数。这个 API 类似于之前的 onCleanup，但它可以在监听器内部的任何地方调用清理函数，使代码更加灵活和简洁。
举个例子：
function startInterval(intervalTime) {const id = window.setInterval(() => console.log('hello'), intervalTime);onWatcherCleanup(() => window.clearInterval(id)); // 当 watcher 被清理时清除定时器
}watchEffect(() => {startInterval(1000); // 每隔 1 秒执行一次
});
场景解释：如果你在某个监听中使用了计时器、网络请求等需要清理的操作，当这个监听不再需要时，可以使用 onWatcherCleanup 自动清除这些操作，避免内存泄漏或其他问题。
自定义元素支持
Vue 3.5 为自定义元素提供了更多控制选项，包括 useHost() 和 useShadowRoot() API，开发者可以选择是否使用 Shadow DOM。
使得使用 Vue 来创建和管理 Web Components（即自定义元素）变得更加简单和灵活。
自定义元素？
自定义元素（Custom Elements）是 Web Components 技术的一部分，允许开发者定义自己的 HTML 标签。这些标签可以像原生 HTML 元素一样使用，但它们的行为是由开发者控制的。Vue 的 defineCustomElement API 就是用来帮助开发者创建这些自定义标签的。
Vue 其实就是增强自定义标元素支持，使其变得更加简单和灵活，实际自定义元素是原生的东西。
Vue 3.5 对自定义元素支持的改进
Vue 3.5 对自定义元素的支持做了多项增强，使得开发者可以更方便地创建、配置和使用这些元素。以下是几个重要的改进：
configureApp选项： 自定义元素现在可以通过configureApp选项来设置应用的配置。例如，你可以使用这个选项为自定义元素定义错误处理器、全局插件等。
举个例子：
// 将一个 Vue 组件（MyElement）注册为一个自定义元素。通过这种方式，你可以在普通 HTML 中像使用标准 HTML 标签一样使用 MyElement，例如 <my-element></my-element>。
defineCustomElements(MyElement, {// 使用了 configureApp 来配置全局的错误处理程序configureApp(app) {// errorHandler 是 Vue 提供的全局配置选项，专门用于捕获并处理应用中的错误。这里，当自定义元素内部发生错误时，errorHandler 会被触发，错误信息会被打印到控制台（console.error）。app.config.errorHandler = (err) => {console.error('Error in custom element:', err);};}
});
解释：这让开发者能够为自定义元素设置特定的应用级别的配置，比如错误处理逻辑等，让元素的行为更加可控。
- Shadow DOM 支持： 在 Vue 3.5 中，你可以选择是否为自定义元素使用 Shadow DOM（默认是开启的）。如果不想使用 Shadow DOM，可以通过设置
shadowRoot: false来禁用它。这对那些不需要 Shadow DOM 隔离的场景非常有用。
举个例子：
defineCustomElements(MyElement, { shadowRoot: false });
解释：Shadow DOM 会为组件的样式和 DOM 创建一个独立的作用域，避免与外部样式或 DOM 的冲突。而禁用 Shadow DOM 可能会让组件更容易与外部环境进行交互Vue BlogLaraChat。
useHost和useShadowRootAPI： Vue 3.5 新增了useHost()和useShadowRoot()API，让开发者能够在自定义元素中访问主机元素（宿主元素）和 Shadow DOM 根节点。这些 API 使得与自定义元素的宿主更容易交互。
举个例子：
<script setup>const host = useHost(); // 访问主机元素const shadowRoot = useShadowRoot(); // 访问 Shadow DOM 根节点
</script>
解释：这些 API 的存在使得开发者可以更加灵活地操作自定义元素的 DOM 结构，特别是那些使用 Shadow DOM 的复杂场景Vue BlogQirolab。
- 无需 Shadow DOM 的自定义元素： Vue 3.5 还允许创建不使用 Shadow DOM 的自定义元素，这样你可以让自定义元素的内容直接插入到页面的普通 DOM 中，而不是隔离在 Shadow DOM 内部。
举个例子：
import MyElement from './MyElement.ce.vue';
defineCustomElements(MyElement, { shadowRoot: false });
解释：在某些情况下，你可能不希望自定义元素的样式或 DOM 被隔离，这时可以禁用 Shadow DOM，从而让自定义元素的内容和普通 DOM 更好地交互。
自定义元素的应用场景
跨框架的可重用组件
自定义元素的一个重要应用场景是创建可以跨多个框架使用的组件。例如，某些团队可能在一个项目中同时使用 Vue 和 React，甚至是原生 JavaScript。这时，自定义元素能够提供一种不依赖特定框架的解决方案，它们可以在任何支持 Web Components 的环境中使用。
场景：开发一个自定义按钮 <custom-button>，这个按钮可以在 Vue、React，甚至是纯 JavaScript 项目中使用，而无需为每个框架编写特定的组件版本。
使用 Shadow DOM 创建的组件可以在不同的项目中重用，而不必担心每个项目的全局样式或 JavaScript 会影响组件的行为。因为组件的样式和 DOM 被封装在 Shadow DOM 内部，不会受到外部的干扰，因此开发者可以放心地将这些组件打包发布。
场景：可以将一个复杂的 date-picker 组件发布为一个 npm 包或自定义元素。因为 Shadow DOM 确保了内部的封装，无论项目的全局样式如何，这个 date-picker 都会保持一致的外观和功能。
适用于需要封装复杂交互逻辑的组件，如日历选择器、图表组件等。
封装复杂的 UI 组件
自定义元素非常适合封装复杂的 UI 组件，如图表、数据表格或富文本编辑器。这些组件通常有复杂的交互逻辑和样式隔离需求，而通过 Shadow DOM 技术，自定义元素可以确保这些组件的样式和 DOM 不与页面的其他部分冲突。
场景：开发一个图表库 <custom-chart>，它可以被任何应用嵌入，并且其样式不会与宿主页面的 CSS 冲突。
第三方组件的发布与共享
自定义元素特别适合用于发布和共享第三方库。像组件库或插件这样的复杂模块，可以打包成自定义元素，方便在各类项目中引入和使用，而无需担心底层技术栈的兼容性问题。
场景：开发了一套复杂的富文本编辑器，可以通过发布为 <custom-editor> 让它能够在任何支持 Web Components 的项目中直接使用。
微前端架构
在微前端（Micro Frontends）架构中，多个前端应用可能需要同时运行在同一个页面中。自定义元素在这种场景下非常有用，因为它们可以封装并隔离不同应用的逻辑、样式和行为，避免互相干扰。
场景：一个大型企业可能使用多个团队开发不同的前端模块，并将这些模块合并到一个主应用中。通过使用自定义元素，如 <user-profile> 或 <shopping-cart>，每个团队可以独立开发和部署自己的模块，而不必担心冲突。
总结：什么时候使用自定义 HTML 元素（标签）？
- 需要跨多个框架或平台复用组件时：如果你希望创建一个可以在不同的框架或技术栈中使用的组件，自定义元素是一个很好的选择。它能确保你的组件在不同的环境下保持一致的行为。
- 希望封装复杂的组件并避免样式冲突时：对于像图表、表格等复杂 UI 组件，自定义元素能够提供更强的样式和功能封装，特别是利用 Shadow DOM，可以防止组件内部样式与页面全局样式发生冲突。
- 需要与团队分享通用组件时：如果你开发的组件需要被不同的开发团队或项目使用，将其打包为自定义元素是一个很好的选择。这样其他开发者可以简单地在他们的项目中使用你定义的标签，而不需要了解底层的实现细节。
- 需要增强 HTML 语义时：自定义元素让你可以定义语义化的标签，而不是在页面中充斥大量
div和span，这不仅有助于代码的可读性，还可以提升可维护性和可扩展性。
补充： Shadow DOM的作用
Shadow DOM 是 Web Components 技术的重要组成部分，它为开发者提供了一种创建组件时隔离 DOM 和样式的方法，实际可以理解为提供了在组件中创建封装的 DOM 和样式的能力。它的核心目的是避免页面中的不同组件相互干扰，从而确保每个组件都能独立工作。
组件样式和结构隔离
Shadow DOM 的最大优势之一是它能将组件内部的样式和 DOM 隔离开来，避免与外部页面发生冲突。这种隔离让开发者能够放心地在组件内定义样式，而不用担心这些样式会意外地影响外部的页面元素。
场景
假设你正在开发一个 custom-modal 组件，这个组件有自己复杂的布局和样式。如果不使用 Shadow DOM，外部页面可能包含相同的 CSS 类名或样式规则，导致组件的样式被覆盖或意外地修改。有了 Shadow DOM，custom-modal 组件的样式与外部页面的样式完全独立，避免了冲突。
<custom-modal></custom-modal><script>class CustomButton extends HTMLElement {constructor() {super();// 它为这个自定义元素附加了一个 Shadow DOM，并设置为 开放模式（open）。这意味着外部 JavaScript 可以通过 element.shadowRoot 访问该元素的 Shadow DOM。如果设置为 closed，则外部无法访问 Shadow DOM。const shadow = this.attachShadow({ mode: 'open' });// Create styles and content inside the shadow root.shadow.innerHTML = `<style>button {background-color: blue;color: white;}</style><button>Click me</button>`;}}// 注册自定义元素// 使用 customElements.define 方法将 CustomButton 注册为一个新的 HTML 元素，标签名为 <custom-button>。一旦注册完成，你就可以像使用普通 HTML 元素一样，在页面中使用 <custom-button>。customElements.define('custom-button', CustomButton);
</script>
- 使用场景：例如开发一个独立的弹出框、下拉菜单或按钮，确保它们的样式在任何页面中都保持一致。
防止全局样式污染
在复杂的页面或应用中，样式污染是常见问题。全局样式可能无意中影响某些局部组件，尤其是使用相同类名或相似选择器时。Shadow DOM 可以确保组件内部的样式和页面外部的样式互不干扰，避免了这些问题。
示例：
- 在一个大型电商网站中，每个子模块可能由不同的团队开发，如果不使用 Shadow DOM，样式冲突会导致页面错乱。使用 Shadow DOM 的组件则可以独立管理其样式，不会与其他模块产生冲突。
使用场景：适用于大型项目或多人协作开发时，确保不同模块之间的样式隔离。
增强隐私和安全性
对于某些敏感的 UI 组件，Shadow DOM 可以提高安全性。通过封装，外部代码很难直接访问和操纵 Shadow DOM 内部的元素和样式。虽然 Shadow DOM 并不是完全的安全沙箱，但它在某种程度上提高了组件的防护能力，避免了外部的恶意干扰。
示例：
- 开发一个包含敏感信息的表单组件，使用 Shadow DOM 让表单元素在页面的其他部分不可见并难以被外部脚本操控，可以有效降低数据泄露或恶意篡改的风险。
使用场景：适用于涉及用户隐私或安全性较高的场景，比如登录表单、支付页面等。
何时不使用 Shadow DOM
- 如果你的组件需要与外部样式保持一致（如继承父级页面的主题风格），使用 Shadow DOM 可能会带来样式不一致的问题。
- 对于需要全局样式统一管理的项目，使用 Shadow DOM 可能会增加复杂度，因为你需要在每个组件内部重新定义全局样式。
服务端渲染（SSR）
1. Lazy Hydration（延迟 Hydration）
Vue 3.5 引入了 Lazy Hydration，允许异步组件仅在需要时进行 “Hydration”（客户端激活：Hydration 是指将服务端渲染的静态 HTML 转换为客户端可以交互的动态组件的过程。默认情况下，Hydration 会在页面加载时立即进行）。也就是说，异步组件不会在页面加载时立即被激活，只有当它们出现在视窗中或根据用户交互需要时，才会启动。这种策略显著减少了初始加载的开销，提高了页面的加载速度和性能，特别适合首屏渲染优化。
这意味着初始渲染时，这个异步组件虽然已经出现在页面中，但还没有完全 “活跃”（没有进行事件绑定等）。只有当用户滚动到它时，才会进行 Hydration 处理。
- 示例：
import { defineAsyncComponent, hydrateOnVisible } from 'vue';
// 异步懒加载
const AsyncComponent = defineAsyncComponent({// 动态导入loader: () => import('./MyComponent.vue'),hydrate: hydrateOnVisible()
});
这种方法在渲染初始页面时不会加载所有内容，而是在必要时才加载和激活组件，减少了客户端的资源消耗。
这样做可以显著减少页面的初始加载时间，特别适合那些不需要立即显示的组件，如图片懒加载、大型表格等。
这种技术非常适合优化首屏性能，特别是在大型 SPA（单页应用）中。
2. useId API
useId 是 Vue 3.5 中一个新的 SSR 特性，它为应用程序中的元素生成唯一且稳定的 ID，保证在服务端和客户端渲染过程中保持一致。这对于表单元素、可访问性标签（如 aria 属性）等场景非常重要，因为它避免了客户端与服务端在渲染 ID 时的不匹配问题，进而消除了与 Hydration 相关的警告或错误。
- 示例：
<script setup>import { useId } from 'vue';const id = useId();
</script><template><form><label :for="id">Name:</label><input :id="id" type="text" /></form>
</template>
通过 useId，可以确保 ID 的唯一性和一致性，不管是在服务端还是客户端渲染的场景下。
3. data-allow-mismatch 属性
Vue 3.5 引入了 data-allow-mismatch 属性，允许开发者处理客户端与服务端渲染不匹配的情况。例如，当服务端渲染的日期格式与客户端有所不同（如 toLocaleString() 产生的格式差异），可以通过 data-allow-mismatch 来抑制不匹配的警告。开发者还可以进一步限定允许的 mismatch 类型，比如仅允许文本、子节点、样式、属性等部分存在不一致。
- 示例：
<span data-allow-mismatch="text">{{ data.toLocaleString() }}</span>
这种方式允许处理一些不可避免的差异，避免用户看到不必要的警告。
4. SSR 与 Custom Elements 的改进
Vue 3.5 针对自定义元素（Custom Elements）进行了优化，使其更好地支持 SSR。开发者现在可以通过 defineCustomElements 更灵活地控制自定义元素的行为，并且可以选择是否使用 Shadow DOM（默认开启）。这使得在构建与 SSR 集成的自定义元素时更加高效和灵活，确保自定义组件能够在服务端正确渲染并在客户端激活时保持一致。
- 示例：
defineCustomElements(MyElement, {shadowRoot: false, // 不使用 Shadow DOMconfigureApp(app) {app.config.errorHandler = (err) => {console.error('Error in custom element:', err);};}
});
5. 其他性能优化
除了功能更新之外，Vue 3.5 还通过优化 SSR 渲染过程中的内存使用和依赖追踪机制，提高了服务端渲染的性能和资源利用效率。尤其在处理大规模应用时，Vue 3.5 的优化减少了渲染时的内存开销，并加快了响应式数据的同步速度。
实验性 `defineModel` API
此新特性简化了父子组件之间的双向数据绑定操作，减少了 v-model 的复杂性。尽管还处于实验阶段，但它有望在未来成为核心功能。
它的目标是简化父子组件之间的双向数据绑定，使得 v-model 的使用更加直观和轻量。
双向数据绑定？
在 Vue 中，双向数据绑定指的是父组件将数据传递给子组件，子组件可以对这些数据进行修改，并将修改后的值返回给父组件。在以前的版本中，通常使用 v-model 来实现双向绑定，这涉及到事件的监听和属性的传递。
`defineModel` API 是做什么的？
defineModel 旨在简化这个过程，让双向数据绑定更加直观，不再需要手动处理复杂的 emit 事件或者 props 的同步操作。它直接定义了模型值的绑定和更新规则，减少了开发者的代码量。
举个简单例子：
以前我们用 v-model 的方式可能是这样的：
<template><input v-model="modelValue" />
</template><script setup>const props = defineProps(['modelValue']);const emit = defineEmits(['update:modelValue']);
</script>
使用 defineModel 之后：
<template><input v-model="modelValue" />
</template><script setup>const modelValue = defineModel();
</script>
解释： 在这个例子中，defineModel 直接处理了 v-model 的逻辑，开发者不需要显式地定义 props 和 emit，这减少了代码量，并使得代码更加直观。
小白如何理解？
defineModel 就像是自动帮你管理数据流动的“智能助手”。以前你需要自己定义一堆规则来告诉 Vue 数据怎么传、怎么改、怎么返回；现在你只要用 defineModel，Vue 就会自动帮你处理这一切。对于简单的输入框、表单等场景，代码变得更简洁，也更容易理解。
注意事项：
因为这是一个实验性的 API，目前还在测试阶段，未来可能会有调整，所以建议开发者在实验性项目中使用，并关注后续版本的更新
其他
useTemplateRef
useTemplateRef 是 Vue 3.5 引入的新 API，专门用于更灵活和高效地获取模板中的元素引用（template refs）。它通过提供对 DOM 元素或组件实例的引用，简化了开发者在 Vue 组件中操作或访问特定 DOM 元素的流程。
- 动态绑定模板引用 在 Vue 2.x 或 Vue 3.x 之前的版本中，开发者通常使用
ref属性和this.$refs或setup函数内的ref来访问模板中的 DOM 元素或子组件。虽然这种方式直观，但有时对于动态绑定或复杂的模板结构会显得不够灵活。而useTemplateRef则允许你以动态的方式来绑定和访问模板中的引用。 - 对动态 ID 的支持 使用传统的
ref绑定时，Vue 只能处理静态的引用名称。而useTemplateRef可以在运行时根据条件动态绑定不同的引用，这让它在处理动态生成的元素或组件时更加灵活。
<script setup>import { useTemplateRef } from 'vue';const inputRef = useTemplateRef('input');
</script><template><input ref="input" />
</template>
useTemplateRef 通过传递字符串 "input"，在运行时为模板中的 <input> 元素创建了一个动态的引用。开发者可以通过这个引用来访问 DOM 元素并操作它，例如设置焦点或读取输入值。
// 使用 inputRef 来在页面加载时给输入框设置焦点
onMounted(() => {inputRef.value.focus();
});
ref="input"：在模板中，<input> 元素的 ref 属性被赋值为 "input"，这和 useTemplateRef('input') 中的字符串是一致的。通过这种方式，Vue 将 <input> 元素与 inputRef 关联起来。
场景应用
操作复杂的 DOM
操作复杂的 DOM 结构 如果你在页面中使用了多个动态生成的组件或元素，useTemplateRef 提供了一个更强大的方式来管理这些元素的引用，特别是在大型应用中。
示例：动态生成多个嵌套的表单组件
假设你有一个复杂的表单，每个表单项是动态生成的，并且你需要对其中的某些元素进行特定操作，比如设置焦点、获取值、或者添加事件监听器。传统的 ref 在这种场景下处理起来不太方便，因为多个 ref 的值会被存储在一个数组中，管理起来复杂。而 useTemplateRef 可以为每个元素创建单独的引用，便于操作。
<script setup>import { useTemplateRef } from 'vue';// 使用动态 ID 创建多个引用// 回调函数为每个动态生成的 <input> 元素创建一个唯一的引用（例如 field-0、field-1 等），与表单项的索引值相关。const fieldRefs = useTemplateRef((index) => `field-${index}`);const formFields = reactive([{ label: 'Name', value: '' },{ label: 'Email', value: '' },{ label: 'Phone', value: '' }]);function focusField(index) {// 使用动态生成的 ref 来设置焦点fieldRefs(index).value.focus();}
</script><template><div v-for="(field, index) in formFields" :key="index"><label :for="`input-${index}`">{{ field.label }}</label><input :ref="fieldRefs(index)" :id="`input-${index}`" v-model="field.value" /><button @click="focusField(index)">Focus</button></div>
</template>
动态操作 DOM 的优势
在处理复杂的表单、数据表格、或者嵌套的组件结构时，useTemplateRef 的动态引用系统提供了更灵活的方式来管理这些元素：
- 单独控制每个元素：你可以为每个元素分配一个唯一的引用，而不是所有元素共享一个引用数组。
- 简化操作逻辑：当需要对特定元素进行操作时（如获取值、设置焦点等），
useTemplateRef提供了更加直观的方式，无需在this.$refs中进行繁琐的数组操作。 - 提高可维护性：对于大型应用中的复杂 DOM 结构，
useTemplateRef可以更好地组织和管理代码，减少混乱，增强代码的可读性和可维护性。
兼容 v-for
兼容 v-for 循环 在使用 v-for 循环生成多个元素时，传统的 ref 绑定并不能轻松区分每个元素，而 useTemplateRef 可以通过动态 ID 或条件为每个元素创建单独的引用，从而更加灵活地管理这些 DOM 元素。
传统 `ref` 的限制
在 Vue 的早期版本中，使用 v-for 生成多个 DOM 元素并绑定 ref 时，所有元素的引用会被存储在同一个 this.$refs 对象中，并以数组形式访问。虽然能访问到这些元素，但不能轻松地为每个元素创建单独的、动态的引用。
传统写法：
<template><div v-for="(item, index) in items" :key="index"><input ref="inputRef" /></div>
</template>
在这种情况下，所有 <input> 元素的引用都会被存储在 this.$refs.inputRef 数组中。如果你想要单独访问某个元素，需要通过数组索引访问特定元素，不够灵活。
解决方案：`useTemplateRef` 的使用
通过 useTemplateRef，可以为 v-for 循环中的每个元素动态创建唯一的引用，从而可以更灵活地访问和操作每个生成的 DOM 元素。
示例：结合 v-for 和 useTemplateRef
<script setup>import { useTemplateRef } from 'vue';// 回调函数 (index) => \input-${index}`来为每个生成的<input>元素创建一个动态的ref。这样，每个input的ref都是独立的，格式如input-0、input-1等，与它们在v-for` 中的索引值相关。const inputRefs = useTemplateRef((index) => `input-${index}`);
</script><template><div v-for="(item, index) in items" :key="index"><input :ref="inputRefs(index)" /></div>
</template>
这种方法非常适合以下场景：
- 表单动态生成：当你有多个动态生成的表单输入框时，
useTemplateRef可以让你轻松获取并操作每个输入框的 DOM 元素，比如设置焦点或读取其值。 - 复杂的列表组件：如果你需要在一个循环中为每个元素提供不同的操作，或者根据条件动态地为每个元素添加行为，
useTemplateRef提供了非常灵活的方式来管理这些元素。
Deferred Teleport
Deferred Teleport 是 Vue 3.5 中 Teleport 功能的一个增强，它允许你在合适的时机将元素传送到目标位置，而不是立即在页面加载时进行传送。这种延迟传送通常与组件的生命周期和条件渲染相关，尤其是在处理复杂的交互场景或性能优化时非常有用。
通常，Vue 的 Teleport 会在组件渲染时立即将其子内容传送到指定的目标位置。然而，在一些场景下，开发者可能希望推迟这种传送行为，直到某些条件满足之后再将内容传送出去。
应用场景
- 延迟加载和显示全局 UI 元素： 在一些性能敏感的应用中，我们可能希望推迟显示一些全局 UI 元素，如模态框、提示框或通知，直到用户触发某个事件后再进行传送和渲染。Deferred Teleport 能够帮助实现这一目标。
- 动态传送目标： 在某些情况下，传送目标可能不是立即可用的，可能是根据用户行为动态生成或延迟加载的 DOM 元素。Deferred Teleport 可以确保传送逻辑不会因为目标元素暂时不可用而出错，而是等待目标存在后再进行传送。
如何实现 Deferred Teleport
Deferred Teleport 的实现通常涉及结合 Vue 的条件渲染和生命周期钩子。例如，我们可以使用 v-if 或 v-show 来控制组件何时出现在 DOM 中，从而延迟 Teleport 的执行：
<template><!-- 这是 Teleport 的目标元素 --><div id="target"></div><!-- 确保 teleport 仅在 isReady 为 true 时渲染，并且 to 始终有效 --><teleport v-if="isReady" to="#target"><div>我将被传送到目标位置</div></teleport>
</template><script setup>
import { ref, onMounted } from 'vue';const isReady = ref(false);onMounted(() => {// 模拟异步操作或其他逻辑，当准备就绪时设置传送目标setTimeout(() => {isReady.value = true;}, 1000);
});
</script>
工作原理
- 条件渲染：通过
v-if结合isReady控制<teleport>的渲染时机，确保内容在适当的时候传送到目标位置。 - 动态传送目标：通过动态绑定
:to属性，你可以控制传送目标的存在与否。在目标不存在时，内容不会被传送，直到目标准备好。
主要优势
- 提升性能：Deferred Teleport 避免了页面加载时不必要的传送，尤其是当传送目标或内容的展示需要等待一些异步操作完成时，可以显著提高性能。
- 更好的用户体验：通过延迟传送和显示全局元素，可以确保只有在需要时才渲染和显示 UI，避免页面闪烁或不必要的视觉变化。
