当前位置：首页 > news >正文

vue3项目实践心得-多次渲染同一svg + 理解v-if、transition、dom加载之间的顺序

news 2025/8/21 10:57:45

🧡🧡需求🧡🧡

未点击查看答案按钮时，步骤3面板未展示内容（v-if控制）
在这里插入图片描述

点击查看答案按钮后，通过graphviz绘制并展示状态转换图，渲染在步骤2中，同时步骤3的v-if变为true，渲染出内容并且也渲染展示这张图
在这里插入图片描述

🧡🧡遇到的问题🧡🧡

渲染重复性：前端通过vue-graphviz库使用svg渲染后端传来的dot_str，从而绘制出这张svg状态转换图，问题出现在项目中需要展示两个同样svg，由于它们的id相同，根据共享原则，导致只渲染了一个
渲染时机：涉及v-if、transition、添加dom节点的操作，时机不对导致步骤3的svg图渲染不出来

🧡🧡解决思路🧡🧡

对于渲染重复性问题：利用cloneNode函数，复制一个新的svg，从而添加dom节点

	 const svg = viz.renderSVGElement(draw_dot['NFA'][0])const svgClone = svg.cloneNode(true)NFAs.value[0].appendChild(svg)NFAs.value[1].appendChild(svgClone)

对于渲染时机：掌握vue3 transition文档中描述的enter钩子，应当确保v-if渲染后的dom生成后，再调用渲染函数（添加svg dom），之后再开始进行transiton过渡

const handleStep3_TransEnter = (el:Element, done:()=>void) => {// console.log(NFAs.value)// console.log('step333333333333333333')if(!step3_open.value) return done()// console.log(222)// 此时元素已插入 DOMnextTick().then(() => {// console.log(NFAs.value)// 确保 ref 已收集if (NFAs.value.length >= 2) {instance().then(viz => {const svg = viz.renderSVGElement(draw_dot['NFA'][0])const svgClone = svg.cloneNode(true)NFAs.value[0].appendChild(svg)NFAs.value[1].appendChild(svgClone)draw_dot['NFA'][1] = true})}})
}