在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/