有一个需求，高了快 2 天，没搞定，请教下达人。
需求：
const data=ref({
id:xxx,ref:关联某个组件，children:[
id:xxx,ref:关联某个组件，children:[]
id:xxx,ref:关联某个组件，children:[]
]
})
------------
尝试 1: 动态渲染：
<KeepAlive>
<component :is="某 item.ref" />
</KeepAlive>
尝试 2：全局注册一个组件池，存储先实例化的组件，然后通过索引方式来挂载
<KeepAlive>
<DirectiveWrapper
:component-id="某 item.componentId"
:component="getComponentById(某 item.componentId)"
/>
</KeepAlive>
问题：
当 ref 可以在 data 里的子父节点交换时，组件会被重新渲染初始化，丢失了状态。 使用过，因为没有共享数据的需求，也尝试过直接存组件状态的，但该丢失还是丢失。
需要大家给点思路方向，需要解决指定组件不被重新渲染。
第 1 条附言 · 2025 年 3 月 7 日
验证过了，基于 data 这个结构来动态渲染组件，因为 component 在节点树上来回变化，会导致 dom 重新渲染，即使使用可 keepalive ，加 nanme 加 key 或者组合 v-show ，都会导致全新渲染。
最终使用了 css 的 grid 类来中间实现，多了很多计算高度偏移的工作，但大体解决了问题，组件不在被重新渲染。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。