框架互操作

• 框架对 DOM 子树的独占管理
• 双渲染模型与虚拟 DOM 差异
• reconciled 与外部 DOM 变更的冲突

React 与 Vue 都采用声明式渲染 + 虚拟 DOM 差异对比，对它们管理的 DOM 子树拥有"所有权"：框架假设子树完全由自己创建与更新，会用虚拟 DOM 做 diff 并直接操作真实 DOM。当多个框架同时管理同一块 DOM（或某框架在另一个框架管理的子树里插入自己管理的节点），会出现冲突：一方在 diff 时删掉或覆盖另一方创建的节点，导致状态丢失、渲染错乱、事件失效。核心原因是"DOM 所有权"唯一性——框架把子树当作自己的私有状态载体，无法意识到外部修改。工程上解决靠"隔离边界"：各框架只管理自己挂载的根节点，跨框架用自定义元素、事件或 slot 通信，避免在同一子树内交叉管理。

冲突的本质是框架对 DOM 的独占假设与虚拟 DOM diff 的破坏性。理解"所有权"才能设计框架互操作，即用自定义元素等标准边界隔离各框架，避免交叉管理同一节点。

• React 并发渲染与外部 DOM 的时序
• useSyncExternalStore 订阅外部状态
• 批量更新与渲染边界

React 并发渲染（Concurrent）下，组件渲染可被中断、重放，React 的虚拟 DOM 与真实 DOM 更新存在异步时序，若直接在 render 中操作外部框架管理的 DOM 会因时序错乱而出错。useSyncExternalStore 提供受控方式订阅外部可变数据源（如外部框架的 store 或状态），在订阅变化时同步触发 React 重渲染，且保证渲染与订阅一致（无撕裂）。其边界在于：外部 DOM 的更新应通过受控的 store 订阅反映到 React，而非在 render 中直接改 DOM；React 的批量更新（自动批处理）会合并多次 setState，避免过度渲染。工程上，承载外部框架组件的容器用 useSyncExternalStore 订阅其状态，把外部变更转换为 React 可感知的更新，同时保持各自的更新边界不乱。

并发渲染 + 外部 DOM 的时序是 React 互操作的核心难点。useSyncExternalStore 是官方解法，把外部状态接入 React 的订阅与渲染模型，避免并发下的撕裂与 DOM 直接操作冲突。

• React 与 Vue 各自的响应式模型
• 生命周期与 DOM 挂载协调
• 数据流动与事件通信

React 与 Vue 采用不同响应式模型：React 基于状态与渲染函数（re-render），Vue 基于响应式代理（Reactivity）与依赖收集。在 React 中挂载 Vue 组件，需隔离两者：React 通过 ref 或 effect 在 DOM 挂载后创建 Vue 根（createApp().mount()），卸载时 unmount；Vue 的响应式状态不能直接传给 React 的 render，需通过自定义元素、事件或受控 store 桥接。协调要点：生命周期（React effect 挂载/清理对应 Vue mount/unmount）、数据流动（React 到 Vue 用 props/attribute，Vue 到 React 用事件/回调）、避免两套响应式同时操作同一 DOM。工程上常把 Vue 组件封装成自定义元素，用标准接口与 React 通信，避免响应式系统互相干扰。

两个响应式系统各自管理自己的 DOM 与状态，协调的关键是"隔离 + 明确边界通信"。用自定义元素或事件作为桥接，避免同级 diff 与响应式副作用冲突。

• attribute 与 property 的差异与反射
• observedAttributes/attributeChangedCallback
• 框架 props 同步与 property 优先

attribute 是 HTML 字符串属性，property 是 JS 对象属性，二者通过反射（reflection）同步：setAttribute 触发 attributeChangedCallback，property setter 通常也应 setAttribute 保持 HTML 一致。在框架 props 同步中，框架既可能通过 attribute（字符串）也可能通过 property（任意类型）传值，边界在于：attribute 只能表达字符串，复杂对象/数组需用 property 传；observedAttributes 只监听 attribute 变化，property 变化需组件自行处理。现代实践是"property 优先"：框架用 property 传递复杂值，attribute 仅用于声明式 HTML 或 string 场景，组件在 property setter 中做同步与渲染，避免字符串序列化开销与类型丢失。工程上据此设计组件 API，兼顾 HTML 声明式与 JS 编程式使用。

attribute/property 反射是框架互操作的核心。attribute 偏声明式/字符串，property 偏编程式/任意类型，现代实践倾向 property 优先以传复杂值并避免序列化，同时保留 attribute 反射兼容 HTML 使用。

• LitElement 基础类
• reactive properties 声明响应式属性
• html 模板与 css 标签模板

Lit 是轻量 Web Components 库，核心包括：LitElement 基类（封装了响应式更新与生命周期）；reactive properties 通过静态 properties 或装饰器声明，属性变化自动触发更新并提供 attribute 反射与缓存；html 标签模板基于 template literal 创建高效模板，支持表达式与条件分支；css 标签模板用于定义样式，支持继承与 CSS 变量；内置指令如 classMap（动态 class）、styleMap（动态 style）、repeat（keyed 列表）、ifDefined 等，提供模板内的命令式逻辑。这些构成 Lit 的声明式渲染与响应式更新模型，使自定义元素开发简洁高效。工程上 Lit 组件仍产出标准自定义元素，可跨框架复用。

Lit 的核心价值是"少样板代码的 Web Components 开发"。reactive properties 解决状态→渲染，html 模板解决声明式结构，css 解决样式，指令解决模板逻辑，四者配合实现高效组件开发。

• 惰性解析与克隆
• HTML 字符串解析与 innerHTML
• SSD 中的模板复用与序列化

元素的内容是惰性的，不会被渲染或执行，document.importNode 或 cloneNode 可克隆其内容用于复用，是客户端渲染模板的常见方式。HTML 字符串解析（innerHTML、DOMParser）把字符串解析为 DOM，可用于服务端预渲染或客户端快速生成结构。在自定义元素 SSR 中，工程价值在于：服务端可用模板字符串生成自定义元素的 HTML 骨架（含 Declarative Shadow DOM），客户端再升级接管；template 提供可复用的结构模板，避免重复手写；字符串解析与序列化让"服务端输出、客户端 hydration"成为可能。需注意模板字符串的转义与 XSS 风险，以及模板惰性带来的解析时机差异。

template 与字符串解析是 SSR 与模板复用的基础工具。template 惰性、可克隆，字符串解析便捷但需注意安全，二者结合支撑自定义元素的服务端渲染与客户端复用。

• React 19 自定义元素支持
• Vue 3 自定义元素集成
• prop/event/slot 互操作与取舍

React 19 原生支持自定义元素：属性按 property 优先传递，composed 事件可直接监听，slot 得到支持，无需手动包装。Vue 3 通过 compilerOptions.isCustomElement 或自定义元素支持，可声明自定义元素并传递 props、监听事件、使用 slot。两者互操作的取舍：props 传递上，React 需区分 attribute 与 property，Vue 需配置 isCustomElement；事件上，React 19 可直接监听 composed 事件，Vue 用 v-on 绑定；slot 上两者都支持命名/默认插槽，但需注意自定义元素的属性名与 Vue 的 kebab-case 转换。工程取舍：优先让自定义元素用 property 传复杂值、用 composed 事件通信、用命名 slot 组合，以最大化与框架的兼容性。

React 19 与 Vue 3 都完善了自定义元素集成，但互操作仍有细节差异。理解各自对 prop/event/slot 的处理，才能设计自定义元素组件 API 使其在多用框架下无缝工作。

• Stencil 的 lazy-loader 输出
• 按需加载与运行时注入
• Stencil Angular/Vue 集成

Stencil 是编译器驱动的 Web Components 框架，可针对不同目标输出。lazy-load 输出目标（lazy-loader）生成按需加载的自定义元素：组件在用到时才加载类与样式，通过 loader 脚本注入，减少首屏包体。Stencil 还提供 Angular/Vue 框架包装器（如 @stencil/angular-output-target），生成面向框架的组件封装，让 Angular/Vue 开发者以原生组件方式使用，自动处理属性、事件、slots 的绑定。工程价值：lazy-load 优化首屏性能，框架包装器降低集成成本，使 Stencil 组件既能作为标准 Web Components 使用，又能无缝嵌入特定框架。取舍在于额外生成器与打包复杂度。

Stencil 的"编译器 + 多输出目标"是其特色：lazy-load 解决按需加载，框架包装器解决框架集成，兼顾 Web Components 复用与框架原生体验。理解输出目标才能正确配置构建。

• @Component 等装饰器声明组件
• JSX 渲染模板
• 分布式组件输出

Stencil 用 TypeScript 装饰器声明组件：@Component（元数据）、@Prop（属性）、@State（内部状态）、@Watch（监听）、@Event（事件）、@Method（方法）等，编译时生成标准自定义元素。渲染用 JSX（如同 React），编译为高效的模板。分布式组件指组件可打包为独立自定义元素，跨框架/跨项目复用。SSR 支持：Stencil 提供 hydrate 目标，可在服务端渲染组件输出 HTML，配合客户端 hydration，实现自定义元素的 SSR。工程价值：装饰器 + JSX 提供框架级的开发体验，分布式输出 + SSR 满足大规模组件库与 SEO 需求。取舍在于编译时依赖与配置复杂度。

Stencil 是"编译器"框架，用装饰器与 JSX 提供开发体验，编译为高性能自定义元素。分布式输出与 hydrate SSR 是其区别于运行时框架的优势，适合大型组件库。

• 惰性与内容克隆
• document.importNode 的深度克隆
• 模板复用与性能

元素的内容是惰性的，不进 DOM 渲染树、不执行脚本，仅作为可复用的模板容器。克隆其内容用 content.cloneNode(true) 或 document.importNode(template.content, true)，得到独立的、可插入文档的节点副本，互不影响。克隆机制的意义：模板声明一次、克隆 N 次，结构化复用且保留原始模板不变；惰性避免未使用模板的渲染开销。工程应用：渲染列表、生成重复结构、自定义元素内部模板复用；结合 customElements 与 Shadow DOM 可构建高效模板化的组件。注意克隆是深拷贝，事件绑定需在克隆后重新绑定。

template 的惰性 + 克隆是"声明一次、复用多次"的机制，避免重复手写结构与重复渲染。深克隆特性保证各副本独立，是模板化渲染与 Web Components 的基础。

• 各自定位与适用场景
• 可复用性、工程化与生态
• 大型项目的取舍维度

Lit Element 提供基于 Web Components 的轻量组件方案，适合跨框架复用、需要框架无关组件库的场景；React/Vue 提供完整应用框架（路由、状态、生态、工具链），适合大型应用的整体开发。工程取舍：利用 Lit 组件库可实现跨框架共享，但 React/Vue 的生态（状态管理、测试、开发工具）更成熟；Lit 侧重组件级可复用，React/Vue 侧重应用级组织。大型项目常采用"混合"：React/Vue 作为应用框架，Lit 自定义元素作为跨团队、跨框架共享的组件库。取舍需权衡团队技能、生态需求、可复用范围与工具链成熟度。

两者不是对立而是互补。应用层选 React/Vue 获得生态与工程化，组件层选 Lit 获得框架无关性。大型项目取舍的关键是"组件复用范围"与"应用生态需求"。

• 自定义元素作为框架中立接口
• 各子应用框架的隔离与通信
• 边界上的数据与事件流转

在微前端中，不同子应用可能用不同框架（React/Vue/Angular），自定义元素可作为框架无关的隔离边界：子应用把组件封装成自定义元素，通过标准属性/事件/插槽交互，宿主或兄弟应用无需了解其内部框架即可使用。工程价值：自定义元素对框架中立，隔离了各子应用的框架依赖与 DOM 管理，避免同一 DOM 被多框架管理冲突；数据经属性传入、事件传出，通信边界清晰。局限：自定义元素不隔离 JS 全局与样式，需配合样式隔离、沙箱与事件治理。工程上自定义元素作为"组件级隔离边界"，与 iframe（应用级隔离）、作用域 CSS 组合使用，形成多层级微前端隔离策略。

自定义元素是微前端框架互操作的"通用语言"，让异构框架组件可互操作。它提供组件级隔离，但非应用级隔离，需与其他隔离手段组合构建完整微前端方案。

• 受控组件与 v-model 的特点
• 多框架同时管理同一表单的冲突
• 更新顺序与值所有权治理

React 受控组件用 value + onChange 把 DOM 值绑定到 React 状态，Vue v-model 用 value + input 双向绑定。若同一原生 input 同时被两套框架管理，其各自派发的事件与状态更新会互相覆盖，形成"值拉锯"：一方根据事件更新状态并回写 value，另一方又用自己状态覆盖，导致值来回跳变、输入卡顿。治理要点：确保表单元素的值所有权唯一——由单一框架管理，另一框架仅通过受控的 store 或事件接入；统一更新顺序，避免并发 setState 冲突；用自定义元素或受控桥接封装，把两套状态映射到单一数据源。工程上避免两套响应式系统直接绑定同一 DOM 的表单值是根本。

值拉锯源于两个响应式系统同时回写同一 DOM。治理核心是"单一数据源 + 明确所有权"，让值从属一个框架，另一框架订阅结果而非直接双向绑定。

• createCustomElement 包装 Angular 组件
• zone.js 变更检测机制
• 事件导出与属性反射边界

@angular/elements 的 createCustomElement 把 Angular 组件包装为标准自定义元素，属性经反射传入组件，事件经 CustomEvent 导出，使 Angular 组件可在非 Angular 环境使用。互操作边界：zone.js 负责变更检测，若组件在 Angular 之外被触发（如外部事件），需确保在 zone 内执行以触发变更检测，否则界面不更新；属性传递依赖 attribute 反射，复杂对象需用 property 或自定义序列化；事件导出需显式声明（outputs），composed 标志需配置。工程上需注意 zone.js 的变更检测触发方式、属性序列化与事件导出，避免"外部改值界面不刷新"的经典问题。

createCustomElement 让 Angular 组件可跨框架复用，但 zone.js 的变更检测依赖 zone 内异步，是主要边界。正确触发变更检测、配置属性序列化与事件导出，是 Angular 组件 Web Components 化的关键。

• 事件总线（EventBus/CustomEvent）
• 全局状态（store）
• postMessage 跨窗口/iframe

框架间通信的常见方式：事件总线（如 mitt、EventTarget，或自定义 CustomEvent）用于轻量、解耦的事件通知，适合组件间/子应用间发动作；全局状态（如全局 store、window 上的共享对象）用于共享数据，适合跨框架读取同一份状态，但需约定命名与读写协议；postMessage 用于跨窗口/iframe 通信，安全且可跨源，适合微前端主应用与子应用（iframe）间的消息传递。工程取舍：事件总线简单解耦但难追踪，全局状态共享直接但易耦合，postMessage 跨源安全但需序列化与异步处理。选择取决于通信范围（同帧/跨帧）、数据规模与安全要求。

通信方式的选择取决于"同帧还是跨帧、数据多少、安全要求"。事件总线与全局状态适合同帧框架间，postMessage 适合跨窗口/iframe 的微前端场景。

• React 生命周期对外部挂载的时机
• Vue mount/unmount 的协调
• 更新与清理的对应

在 React 中嵌入 Vue 组件，需在 React 生命周期中协调 Vue 的挂载与卸载：通常在 React 的 useLayoutEffect 或 useEffect 中创建 Vue 应用并 mount 到 ref 容器，在 cleanup 中调用 unmount 销毁。生命周期的对应：React 挂载（effect）对应 Vue createApp/mount，React 卸载（cleanup）对应 Vue unmount；React 更新时通过 ref 或 props 把新数据传给 Vue 组件（如更新其 store 或调用方法）。协调要点：避免 Vue 的响应式在 React 渲染外被直接操作导致时序错乱；防止 Vue 挂载的 DOM 被 React 的 diff 覆盖；正确处理卸载避免内存泄漏。工程上把 Vue 封装成受控组件，用明确的接口管理挂载、更新与卸载。

生命周期协调的核心是"谁挂载谁卸载、何时更新"。React 的 effect/cleanup 天然对应 Vue 的 mount/unmount，用受控接口桥接数据，避免两套渲染系统在同一 DOM 上冲突。

• 事件绑定时机与重复绑定
• 卸载时未清理监听
• 事件跨框架的派发与冒泡

框架互操作的事件陷阱：一是事件绑定时机——在外部框架 DOM 挂载前绑定、或挂载后未及时绑定，导致监听失效；二是重复绑定——元素被框架重复渲染时重新绑定而同名监听累积，造成重复触发；三是卸载未清理——组件销毁时未移除监听器，造成内存泄漏与幽灵回调；四是事件派发与冒泡——跨框架的自定义事件需设置 composed/bubbles 才能正确冒泡，否则外部框架监听不到。工程上用 ref 找稳挂载点、统一绑定/解绑成对、卸载时 removeEventListener、事件用 composed 派发，避免这些陷阱。

事件陷阱多源于"外部框架不知道元素被谁管理"。把握绑定时机、成对绑定/解绑、composed 派发，是框架互操作事件处理的关键，尤其注意卸载清理防内存泄漏。

• 卸载顺序与生命周期
• 未清理的监听/定时器/订阅
• 防止内存泄漏的工程实践

React/Vue 混合渲染时，卸载顺序决定清理是否完整：父框架卸载时，需先清理子框架（Vue unmount / React unmount），再释放自身，否则子框架的 DOM 与副作用残留。内存泄漏来源：未解绑的原生事件监听、未清理的定时器/Interval、未取消的订阅（store/WebSocket）、未卸载的 Vue 实例或其内部引用。工程实践：卸载回调中成对清理（unmount + removeEventListener + clearInterval + 取消订阅）；用 effect cleanup 管理外部实例生命周期；避免把外部实例状态存到全局造成泄漏；用 memory 工具验证卸载后无残留。正确的卸载顺序与清理是混合渲染内存安全的关键。

卸载顺序 + 清理完整性决定了是否泄漏。父框架先卸载自身、子框架后卸载会留下孤儿，应保证子框架实例在父框架清理前被正确 unmount 并清理其副作用。

• CustomEvent 的 bubbles/composed 标志
• React 合成事件系统与原生事件
• 自定义元素事件的监听与冒泡边界

CustomEvent 分发时可用 bubbles 与 composed 标志控制传播：bubbles 决定是否冒泡到祖先，composed 决定是否跨过 Shadow DOM 边界冒泡到文档。React 使用合成事件系统（事件委托到根容器），默认监听的是冒泡阶段的原生事件；自定义元素若在原 Shadow DOM 内部派发事件，需 composed: true 才能冒泡到 React 根容器被捕获，否则 React 监听不到。监听边界：React 通过 onXxx 监听合成事件，对原生自定义元素事件需确保其 composed/bubbles 以到达 React 委托点；也可用原生 addEventListener 在容器上监听。工程上自定义元素派发事件时设置 { bubbles: true, composed: true }，确保 React/Vue 等依赖事件委托的框架能正确监听。

React 合成事件依赖事件冒泡到根容器，因此自定义元素的事件必须 composed: true 才能跨 Shadow 边界到达。理解 composed/bubbles 与事件委托，是框架监听自定义元素事件的前提。

• customElement 编译选项
• props 属性反射与事件导出
• SSR 与自定义元素编译的限制

Svelte 通过 <svelte:options customElement="my-el"> 或编译选项把组件编译为自定义元素。props 通过属性反射传入（字符串属性映射，复杂对象需 property），事件通过 dispatchEvent 导出为 CustomEvent，slot 映射为插槽。限制：props 的 attribute 反射只支持字符串，复杂类型需用 property 或自定义处理；事件导出需显式 dispatch；SSR 方面，Svelte 的 SSR 输出与自定义元素编译需分别配置，自定义元素编译后的事件绑定与样式输出在 SSR 场景需注意（SSR 输出 HTML、客户端升级接管交互）。工程上需显式声明 props 反射、事件导出，并分场景配置 SSR 与客户端编译，避免属性/事件丢失。

Svelte 编译为自定义元素是"编译时"方案，SSR 与 CE 编译是两个目标。限制主要在属性序列化、事件显式导出与 SSR 配置，理解后才能正确封装可跨框架复用的 Svelte 组件。