Vue.js中的render函数

Question

当使用Vue.js中的render函数来呈现dom元素时，我尝试用JavaScript的if重写v-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实例似乎不会去销毁生命周期。

如果我使用vm.$destory方法，实例将进入destory生命周期，但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/