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

但是当显示为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(); 
     } 
    } 
} 

这里是工作提琴：https://jsfiddle.net/srinivasdamam/3s18pjrg/