Vue中的生命週期（淺談）
阿新 • • 發佈：2018-11-10
Vue中的宣告週期是什麼？
vue例項從建立到銷燬的過程稱之為vue的生命週期
用Vue框架，熟悉它的生命週期可以讓開發更好的進行。
首先先看看官網的圖，詳細的給出了vue的生命週期:
接下來我們就根據上面那張圖來分析分析模擬一下執行生命週期
它可以總共分為8個階段：
beforeCreate（建立前）,
created（建立後）,
beforeMount(載入前),
mounted（載入後）,
beforeUpdate（更新前）,
updated（更新後）,
beforeDestroy（銷燬前）,
destroyed（銷燬後）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>life cycle</title> <script src="./node_modules/vue/dist/vue.min.js"></script> </head> <body> <div class="container"> <button @click = "msg = '我是updated週期'"></button> {{ msg }} </div> </body> <script> // 我們可以看圖 // https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA let vue = new Vue({ el : ".container", data : { msg : "咳咳咳，lifecycle" }, methods : { show() { return "我是lifecycle methods"; } }, // ##### 元件建立的生命週期 // 1.首先我們建立了一個vue 例項new Vue var vue = new Vue // 2.我們遇到的第一個生命週期 // beforeCreate 初始化vue 例項 只有預設的一些生命週期函式和 // 預設事件，其它都為建立好 // 在beforeCreate的時候 data和methods還沒有初始化 beforeCreate () { console.log(this.msg); console.log(this.show); // 輸出undefined }, // 3.遇到第二個生命週期created data和methods都已經初始化完畢 // 如果要操作data和methods的資料最好在created中操作 created() { console.log(this.msg);//輸出 咳咳咳，lifecycle console.log(this.show()); //輸出 我是lifecycle methods } , // 4.我們進入判斷，有 `el` 嗎？ 有 在繼續問有template嗎? // 有 將模板編譯成function // 沒有 自動編譯成模板 // 這個編輯模板 把vue的指令都執行完畢形成一個最終的字串模板存放在 // 記憶體當中，只是渲染好了模板，並沒有掛載到DOM樹上面 // 5.我們遇到第三個生命週期函式 beforeMount // 這個時候我們的模板還在記憶體當中，並沒有渲染到頁面當中 // 所以這個時候的資料還是舊的 beforeMount() { console.log(document.querySelector(".container").innerText); //輸出 {{ msg }} // 這個時候頁面是之前的html資料 // 並沒有渲染新的資料 }, // 6.我們遇到了第四個生命週期函式 Mounted // 這個時候我們的頁面資料已經render最新的了 // 表示例項化完畢 // 元件建立生命週期結束 // 開始執行生命週期階段 mounted() { console.log(document.querySelector(".container").innerText); //輸出 哈哈，我是lifecycle }, // 7.##########我們開啟 執行元件生命週期階段(資料更新才執行) // 執行生命週期可以執行次數 0 - 正無求大 // 因為資料沒更新就不會執行 而且資料可以一直更新 // 7.1 首先我們要判斷資料有沒有進行 頁面之間的資料的傳遞 資料發生改變了嗎 // 經歷了資料執行了嗎 // beforeUpdate生命週期階段 // 這個時候我們的資料進行了改變 // 但是beforeUpdate階段的頁面上的資料還是舊的 並沒有渲染新資料 beforeUpdate() { console.log(document.querySelector(".container").innerText); // 頁面上的資料是： 哈哈哈，lifecycle console.log(this.msg); // 而元件裡面的資料是： 我是updated週期 }, // 8.我們遇到的生命週期 updated // 這個時候頁面上的資料是最新的 進行了更新 // 進行了 M層 -> V層的更新 updated() { console.log(document.querySelector(".container").innerText); // 頁面上的資料是： 我是updated週期 console.log(this.msg); // 而元件裡面的資料是： 我是updated週期 }, // 9.我們的元件執行生命週期結束 // #########開始執行銷燬生命週期 /* beforeDestroy 當執行已經進行了銷燬lifecycle階段 但是data,methods,filters,directives等等還並沒有銷燬 都是出於可執行狀態 destroyed 當執行到destroyed周期函式的時候，元件已經完全被銷燬了 data,methods,filters,directives等等都不可用 */ }); </script> </html>
這就是我對生命週期的理解，很簡單吧。
想看更多點選我的部落格