为什么render()挂载的dom元素被删除后，无法再次挂载 ！！ Why can't render() mount a dom element again after it is deleted

[wilburfs]

refer to this code ：

import renderTest from './components/renderTest.vue'
const renderBtn = () => {
const test = document.querySelector('.test')
test != null && test.remove()
render(h(renderTest), document.body)
count.value+=1
}
const info=ref('激活')
const count=ref(0)

I binded this function on a btn.
the first time ,the component can be shown and removed. And then the render function no longer valid！！
[我把模板引入绑定在按钮上激活，第一次可以挂载，删除。之后，被引入的模板就无法再挂载了。demo在这里: [(https://github.com/wilburfs/vue3-render-issue.git )]

[Justineo]

You are not supposed to manipulate DOM elements which are rendered by Vue. Use v-if to properly toggle the existence of a rendered element/component.

[wilburfs]

yes , I know v-if can help to solve this needs.I just want to konw why the render() function can`t take effect twice. That will cause some restrictions when I need to mount some special elements on dom other than ’#app‘.

谢谢你的回答，v-if确实能解决这个问题。但我需要了解一下render()能挂载一次却无法挂载第二次的原因，这影响到我以编程方式把一些特殊元素挂到’#app‘以外的dom元素上。