render function in Vue.js

Question

when use render function in Vue.js to render a dom element,I try to rewrite v-if directive with JavaScript’s if like this.

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

But when show is false, it seems to Vue instance won't go to destory lifecycle.

If I use vm.$destory method,the instance go to destory lifecycle,but the dom element still exists.

how dose it happen?

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

Here is the working fiddle: https://jsfiddle.net/srinivasdamam/3s18pjrg/