javascript - Vue.js 中的渲染函数

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 实例似乎不会进入 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();
        }
    }
}

这是工作 fiddle :https://jsfiddle.net/srinivasdamam/3s18pjrg/