这是一个创建于 219 天前的主题，其中的信息可能已经有所发展或是发生改变。
有一个需求，高了快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 里的子父节点交换时，组件会被重新渲染初始化，丢失了状态。 使用过，因为没有共享数据的需求，也尝试过直接存组件状态的，但该丢失还是丢失。
需要大家给点思路方向，需要解决指定组件不被重新渲染。
需求：
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 条附言 218 天前
验证过了，基于 data 这个结构来动态渲染组件，因为 component 在节点树上来回变化，会导致 dom 重新渲染，即使使用可 keepalive ，加 nanme 加 key 或者组合 v-show ，都会导致全新渲染。
最终使用了 css 的 grid 类来中间实现，多了很多计算高度偏移的工作，但大体解决了问题，组件不在被重新渲染。
最终使用了 css 的 grid 类来中间实现，多了很多计算高度偏移的工作，但大体解决了问题，组件不在被重新渲染。
 | 1 0xbe 219 天前 KeepAlive |
 | 3 sundev 219 天前 KeepAlive 的组件必须要有 Name ，是不是这个问题？ |
 | 5 zhhbstudio 219 天前 <zujian1 v-show="id==1"> <zujian2 v-show="id==2"> <zujian3 v-show="id==3"> |
 | 6 magicflower 219 天前 via Android keepalive + v-show ? |
 | 7 sunorg OP |
 | 8 lisongeee 219 天前 store 状态提升到全局/组件外部，组件只保留纯渲染函数 |
 | 9 jardel 219 天前 组件开发需要”变量提升“ store 或者父级组件里 |
 | 10 lanced 219 天前 |
 | 11 really28 219 天前 <KeepAlive :include="cacheKeys"> <component :is="item.ref" :key="item.uid" // 使用全局唯一的 ID v-show="item.visible" /> </KeepAlive> 关键点是 key 参数，确保每一个是唯一的 |
| 12 zhhbstudio 219 天前 v-show 不会丢啊，v-show 值为 false 时就是 style="display:none;" |
 | 13 wangtian2020 219 天前 大不了不分组件了写在一个文件里不行吗 |
 | 14 arnotong 219 天前 可以试试这样: <div v-for> <KeepAlive> <component :is=ref /> </KeepAlive> </div> |
| 15 sunorg OP @zhhbstudio @wangtian2020 @arnotong 验证过了，基于 data 这个结构来动态渲染组件，因为 component 在节点树上来回变化，会导致 dom 重新渲染，即使使用可 keepalive ，加 nanme 加 key 或者组合 v-show ，都会导致全新渲染。 最终使用了 css 的 grid 类来中间实现，多了很多计算高度偏移的工作，但大体解决了问题， |
Select Language