Vue.js 父元件及子元件間的生命週期(Lifecycle) | vue destroy component self
之前已經有提到Vue實體的生命週期[1],現在我們來研究一下如果加上子元件的話整個生命週期會是怎麼跑的。建立父元件使用Vue的root當作父元件:
之前已經有提到 Vue 實體的生命週期[1],現在我們來研究一下如果加上子元件的話整個生命週期會是怎麼跑的。
建立父元件使用 Vue 的 root 當作父元件:
<div id="app" style="background-color: green;"> root count: {{count}} <button @click="count++">+1 for root</button> <button @click="$destroy()">destroy root</button> ... </div> 設置 count 並變動其值以便測試 update 鉤子 設置 $destroy 事件 trigger 以便測試 destroy 鉤子 var vm = new Vue({ el: "#app", data: { count: 0 }, beforeCreate() { console.log("root beforeCreate"); }, created() { console.log("root create"); }, beforeMount() { console.log("root beforeMount"); }, mounted() { console.log("root mounted"); }, beforeUpdate() { console.log("root beforeUpdate"); }, updated() { console.log("root updated"); }, beforeDestroy() { console.log("root beforeDestroy"); }, destroyed() { console.log("root destroyed"); } });在各個 hook 上設置 console.log 以...