生命周期

1. 生命周期又名生命周期回調函數，生命周期函數，生命周期鉤子。
2. 生命周期是Vue在關鍵時刻幫我們調用的一些特殊名稱的函數。
3. 生命周期函數的名字不可更改，但函數的具體內容是程序員根據需求編寫的。
4. 生命周期中的this指向vm或組件實例對象。

鉤子函數

鉤子函數用來描述Vue實例從創(chuàng)建到銷毀整個生命周期。

八大鉤子數分別是：

beforeCreate,created,beforeMount,mounted（掛載）,beforeUpdate,updated（更新）,beforeDestory,destoryed（銷毀）

實例創(chuàng)建

            beforeCreate() {
                console.log('beforeCreate')
                console.log(this);//vm

            },
            created() {
                console.log('created')
            },

• beforeCreate前的init：初始化：生命周期、事件，但數據代理還未開始
  data:{n:1},vm._data和vm.n都不存在。
• beforeCreate：此時，無法通過vm訪問到data中的數據、methods中的方法。

   beforeCreate() {
                console.log('beforeCreate')
                console.log(this);//vm
                debugger;//只分析到這里代碼停到這里
            },
  

• beforeCreate之后的init：數據監(jiān)測，數據代理。
• created：此時，可以通過vm訪問到data中的數據，methods中配置的方法。

頁面掛載

 beforeMount() {
                console.log('beforeMount');
                console.log(this);//vm
                // debugger;//只分析到這里代碼停到這里

            },
            // vue完成模板的解析并把初始的真實DOM元素放入頁面后（掛載完畢）調用mounted
            mounted() {
                console.log('mounted', this.$el instanceof HTMLElement)//mounted 是真實dom
            },

• 下一階段，Vue開始解析模板，生成虛擬DOM（內存中），頁面還不能顯示解析好的內容。
  有el選項，無template選項，解析el的外部html做為模板,檢測div是否屬于模板，可以給div綁定:x=“n”，可以通過查看是否解析來看。
  

無el選項，當vm.$mounted(el)被調用，檢測是否有template選項，進入下一步。
有el選項，有template選項，解析template進入渲染函數

將html內容放入單引號不換行不報錯，或者換行將單引號換成反引號，就不會報錯。

根據報錯的提示,一個template只能有一個根元素，所以需要將內容用div包裹.這樣就不報錯了，但是這樣的話div的root類名就不存在了。

• beforeMount頁面呈現(xiàn)的是未經Vue編譯的DOM結構；所有對DOM的操作，最終都不奏效。

  beforeMount() {
                console.log('beforeMount');
                console.log(this);//vm
                debugger;//只分析到這里代碼停到這里
            },
  

  如果沒有debugger斷點,控制臺都不會顯示操作DOM的結果。
• 將內存中的虛擬DOM轉為真實DOM插入頁面（將vm$el替換el）
• mounted：此時頁面中呈現(xiàn)的是經過Vue編譯的DOM，對Dom操作均有效（盡可能避免）。至此初始化過程結束，一般在此進行：開啟定時器、發(fā)送網絡請求、訂閱消息、綁定自定義事件、等初始化操作。

數據更新

beforeUpdate() {
                console.log('beforeUpdate')
                console.log(this.n)
                // debugger;
            },
            updated() {
                console.log('updated')
                console.log(this.n)
                // debugger;
            },

• mounted掛載后，當數據發(fā)生改變會先調用beforeUpdate,此時，數據是新的，頁面是舊的。頁面尚未和數據保持同步。根據新數據，生成新的虛擬DOM，隨后與舊的虛擬DOM進行比較，最終完成頁面更新，即：完成了Model->View的更新，更新完后，頁面和數據保持同步，數據是新的，頁面也是新的。

實例銷毀

            beforeDestroy() {
                console.log('beforeDestroy')
            },
            destroyed() {
                console.log('destroyed')
            },

• 當vm.$destroy()調用時，beforeDestroy:此時，vm中所有的：data、methods、指令等等，都處于可用狀態(tài)，馬上要執(zhí)行銷毀過程，一般在此階段：關閉定時器，取消訂閱消息，解綁自定義事件等收尾操作。

• vm.$destroy()完全銷毀一個實例，清理它與其它組件實例的連接，解綁它的全部指令及事件監(jiān)聽器（自定義事件）。
  

  console.log是原生的do事件不是自定義事件所以銷毀后還是存在的文章來源地址http://www.zghlxwxcb.cn/news/detail-571501.html

總結

常用的生命周期鉤子：

1. mounted，發(fā)送ajax請求，啟動定時器，綁定自定義事件，訂閱消息等【初始化操作】。
2. beforeDestroy：清除定時器，解綁自定義事件、取消訂閱消息等【收尾工作】。

關于銷毀Vue實例

1. 銷毀后借助Vue開發(fā)者工具看不到任何信息。
2. 銷毀后自定義事件會失效，但原生DOM事件依然有效。
3. 一般不會再beforeDestroy操作數據，因為即使操作數據，也不會再觸發(fā)更新流程了。

到了這里，關于Vue生命周期詳解學習筆記的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！