在Vue.js中渲染函数

Question

当在Vue.js中使用渲染函数来渲染dom元素时，我尝试用JavaScript重写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是假的时候，似乎Vue实例不会进入destory生命周期。

如果我使用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/