render function in Vue.js

Question

dom 요소를 렌더링하기 위해 Vue.js에서 render 함수를 사용할 때, 나는 JavaScript와 함께 if-if 지시어를 다시 작성하려고합니다.

export default{ 
    destroyed(){ 
     console.log("destroyed") 
    }, 
    props:['show'], 
    render(h){ 
     if(this.show){ 
      return h('div',{domProps:{innerHTML:'test'},on:{click:this.quit}}) 
     } 
    }, 
    methods:{ 
     quit(){ 
      this.$destroy(); 
     } 
    } 
} 

그러나 show가 false 일 경우, Vue 인스턴스는 destory lifecycle로 이동하지 않습니다.

vm. $ destory 메소드를 사용하는 경우 인스턴스는 destory lifecycle으로 이동하지만 dom 요소는 계속 존재합니다.

복용량은 어떻게됩니까? 여기

Answer 1

export default{ 
    destroyed(){ 
     console.log("destroyed") 
    }, 
    props:['show'], 
    render(h){ 
     if(this.show){ 
      return h('div',{domProps:{innerHTML:'test'},on:{click:this.quit}}) 
     }else { 
      return null 
     } 
    }, 
    methods:{ 
     quit(){ 
      this.$destroy(); 
     } 
    } 
} 

는 작업 바이올린입니다 : https://jsfiddle.net/srinivasdamam/3s18pjrg/