父beforeCreate ==> 父created ==> 父beforeMount ==> 子beforeCreate ==> 子created ==> 子beforeMount ==> 子mounted ==> 父mounted

父beforeUpdate ==> 子beforeUpdate ==> 子updated ==> 父updated

父beforeDestroy ==> 子beforeDestroy ==> 子destroyed ==> 父destroyed

 <div id="root">
        <!-- 讓h3透明度產(chǎn)生過渡的效果 -->
        <h3 :style="{opacity:opacity}">歡迎學(xué)習(xí)Vue!</h3>
        <button @click="des">點(diǎn)擊我銷毀</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {  
                des(){
                    // 觸發(fā)此函數(shù)必定調(diào)用，beforeDestroy()，destroyed()
                    this.$destroy()
                }
            },
            mounted() { //掛載
                /*
                		- 完成模板解析后并且將初始的真實(shí)的DOM元素掛載到頁面后，才執(zhí)行的函數(shù)
                			只會(huì)執(zhí)行一次
                		- this指向Vue
                		- 開發(fā)中常用的方法，當(dāng)我們想要讀取某個(gè)屬性但是讀不到，就可以
                		  將該屬性綁定到共同能夠訪問到的元素上，例如下面定時(shí)器的例子
                */
                this.timer = setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0)
                        this.opacity = 1
                }, 10);
            },
            beforeDestroy() {
                console.log("beforeDestroy - 清除定時(shí)器");
                clearInterval(this.timer)
            },
            destroyed() {
                console.log("destroyed - 銷毀完畢")
            },
        })
    </script>

  <div id="root">
        <h3>n的值為：{{n}}</h3>
        <button @click="add">點(diǎn)擊我n+1</button>
        <button @click="remove">點(diǎn)擊銷毀vm</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                n:1
            },
            methods: {
                add(){
                    this.n++
                },
                remove(){
                    this.$destroy()
                }
            },
            beforeCreate() {
                /* 
                    此時(shí)初始化生命周期，事件等，數(shù)據(jù)代理還未開始
                    vm無法訪問到data中的數(shù)據(jù)，methods中的方法
                */
                console.log("beforeCreate");
                //console.log(this.n);  //undefined
                // console.log(this.add()); // this.add is not a function
                // debugger
            },
            created() {
                /* 
                    已經(jīng)完成了初始化的數(shù)據(jù)監(jiān)視和數(shù)據(jù)代理
                    vm可以訪問到data中的數(shù)據(jù)和methods的方法
                */
                console.log("created");
                // console.log(this.n);  // 1
                // console.log(this.add());  // undefined
                // debugger
            },
            beforeMount() {
                /*
                    掛載之前，也就是圖中的判斷框里執(zhí)行的，此階段是Vue
                    在解析模板并且生成虛擬DOM存儲(chǔ)在內(nèi)存當(dāng)中，頁面還不能
                    看到解析后的樣子
                 */
                 console.log("beforeMount");
                //  debugger
            },
            mounted() {
                /* 
                    完成模板解析后并且將初始的真實(shí)的DOM元素掛載到頁面后，才執(zhí)行的函數(shù)
                    一般在此：開啟一些定時(shí)器、發(fā)送網(wǎng)絡(luò)請求、訂閱消息、
                    綁定自定義事件等等初始化
                 */
                console.log("mounted");
                // debugger
            },
            beforeUpdate() {
                /* 
                    當(dāng)數(shù)據(jù)發(fā)生更新后，此時(shí)數(shù)據(jù)已經(jīng)更新完成，但是頁面
                    還是未更新的。
                    也就是面試所問的：頁面和尚未和數(shù)據(jù)保持同步的階段
                 */
                console.log("beforeUpdate");
            },
            updated() {
                /* 
                    在這之前會(huì)進(jìn)行新舊虛擬DOM比較，最終完成頁面的更新
                    此階段就是頁面和數(shù)據(jù)保持同步
                 */
                 console.log("updated");
            },
            beforeDestroy() {
                /* 
                    當(dāng)我們調(diào)用vm.$destroy時(shí)，才會(huì)執(zhí)行下面兩個(gè)函數(shù)，
                    馬上要執(zhí)行銷毀階段，一般在這個(gè)階段做一些收尾操作
                    比如：關(guān)掉定時(shí)器，取消訂閱，解綁自定義事件
                 */
                console.log("beforeDestroy");
            },
            destroyed() {
                /*
                    所有的指令,所有的自定義事件監(jiān)聽器都沒了（只留下原生的dom的事件）
                 */
                console.log("destroyed");
            },
        })
    </script>