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