Render-Funktion in Vue.js

Question

Wenn Render-Funktion in Vue.js verwenden, um ein dom-Element zu rendern, ich versuche, v-if-Anweisung mit JavaScript ist wie folgt umschreiben.

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(); 
     } 
    } 
} 

Aber wenn show falsch ist, scheint es, dass die Vue-Instanz nicht in den destory lifecycle geht.

Wenn ich die Methode vm. $ Destory verwende, geht die Instanz in den Lebenszyklus des Distory, aber das dom-Element existiert noch.

Wie dosiert es?

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(); 
     } 
    } 
} 

Hier ist die Arbeits Geige: https://jsfiddle.net/srinivasdamam/3s18pjrg/