本文档介绍了 Vue.js 核心中超出基本响应性、组件和渲染系统的高级特性。这些特性支持更复杂的应用程序架构和集成模式。有关基本组件系统的信息，请参阅组件系统，有关响应性的详细信息，请参阅响应性系统。
Vue.js 提供了几项高级特性来解决现代 Web 应用程序中的特定挑战。
来源
Vue 提供了与 Web Components 标准强大的集成，允许 Vue 组件被用作任何 Web 应用程序中的自定义元素，即使是在 Vue 之外。
defineCustomElement 和 defineSSRCustomElement 函数将 Vue 组件定义转换为自定义元素。它们内部创建一个扩展 HTMLElement 的类，并管理 Vue 组件的生命周期。
来源
属性/特性反射：Vue 的 prop 会自动映射到自定义元素的属性和特性，并进行适当的类型转换。
Shadow DOM 集成：默认情况下，自定义元素使用 Shadow DOM 进行样式封装。可以通过 shadowRoot: false 选项禁用此功能。
插槽：支持原生的插槽投影，无论是否使用 Shadow DOM。
异步组件：可以从异步组件创建自定义元素，并具有适当的加载状态。
SSR 支持：defineSSRCustomElement 提供与声明式 Shadow DOM 的 hydration 兼容性。
使用示例
来源
Teleport 是一种允许将 DOM 内容移动到 DOM 树中不同位置的功能，同时保留组件层级以进行事件处理和响应性。
核心实现位于 TeleportImpl 中，它负责创建、移动和卸载 teleported 内容的过程。
来源
目标选择：可以通过 CSS 选择器或直接的元素引用将内容 teleport 到任何 DOM 元素。
禁用模式：Teleport 可以动态启用/禁用，在禁用时将内容放回原始位置。
延迟加载：defer 属性允许在目标元素存在于 DOM 中后 teleport 内容，即使它稍后才出现在文档中。
保持上下文：保留组件上下文和响应性，允许事件通过虚拟 DOM 树冒泡。
SSR 支持：Teleport 可与服务器端渲染配合使用，并提供特殊的 hydration 处理。
使用示例
来源
Suspense 是一项实验性功能，提供了一种处理异步组件或异步 setup 函数加载状态的方法。
Suspense 被实现为一个特殊的内置组件，用于管理异步依赖项和渲染状态。
来源
异步组件：处理异步组件或具有异步 setup 函数的组件的加载状态。
嵌套异步依赖：跟踪所有嵌套的异步组件，并在所有组件解析后才渲染最终内容。
超时：支持超时选项，以便在异步操作花费时间过长时显示备用内容。
过渡支持：与过渡系统配合使用，实现备用内容和已解析内容之间的平滑视觉变化。
事件：提供不同状态的事件 - onPending、onResolve 和 onFallback。
使用示例
来源
Vue 的 SSR 系统在服务器上渲染组件，然后将渲染后的 HTML 在客户端上 "hydration"，使其具有交互性。
hydration 过程会将事件监听器和响应式状态附加到现有 DOM 上，而不是重新创建它们。
来源
不匹配检测：识别并处理服务器渲染的 HTML 与客户端将要渲染的内容之间的差异。
组件处理：对不同组件类型进行特殊处理，包括 Fragments、Teleport 和 Suspense。
属性归一化：对属性、类名和样式进行归一化，以实现正确的匹配。
错误恢复：在生产环境中，尝试以最小的 DOM 更改来从不匹配中恢复。
Web Components 支持：对带有 Shadow DOM 的自定义元素的 hydration 提供特殊支持。
来源
热模块替换允许在开发过程中更新组件，而不会丢失状态或需要完全重新加载页面。
Vue 的 HMR 系统使用全局运行时 API 来跟踪和更新组件。
来源
组件跟踪：使用唯一的 __hmrId 注册组件以进行热更新。
选择性更新：可以仅更新渲染函数或整个组件定义。
状态保留：在可能的情况下，在更新期间保留组件状态。
自定义元素集成：对 Web Components 进行特殊处理，以更新 Shadow DOM 中的样式和模板。
开发工具：暴露为一个全局 API，构建工具可以与其交互。
来源
Vue 的高级功能相辅相成，协同工作以提供强大的能力。
例如
自定义元素 + SSR：defineSSRCustomElement 通过声明式 Shadow DOM 提供 hydration 支持。
Teleport + SSR：Teleport 的内容被收集到缓冲区中，并在服务器渲染期间插入到正确的位置。
Suspense + Teleport：Teleport 的内容可以被包裹在 Suspense 中以处理异步加载状态。
自定义元素 + HMR：特殊处理会更新 Shadow DOM 中的样式和模板。
来源
Vue 的高级功能为构建复杂的应用程序提供了强大的能力，同时保持了清晰的基于组件的架构。这些功能可以独立使用，也可以组合使用以满足特定的应用程序需求。
每个功能都经过精心设计，可以与 Vue 的核心渲染和响应性系统协同工作，同时还提供了与 Web 标准和外部工具的集成点。