<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> </body> <script src="js/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ }, methods:{ }, beforeCreate(){ // 這是我們遇到的第一個生命周期函數，表示實例被完全創建出來之前，會執行他 // 注意：在beforeCreate生命周期函數執行的時候，data和methods中的數據還沒有被初始化 }, created(){ // 這是遇到的第二個生命周期函數 // 在created中，data和methods都已經被初始化好了 // 如果要調用methods中的方法，或者操作data中的數據，最早只能在created中操作 }, beforeMount(){ // 這是遇到的第三個生命周期函數，表示模板已經在內存中編譯完成，但是尚未把模板渲染到頁面中去 // 在beforeMount執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串 }, mounted(){ // 這是遇到的第四個生命周期函數，表示內存中的模板，已經真實的掛載在頁面中，用戶已經可以看到渲染好的頁面了 // mounted是實例創建期間德 最后一個生命周期函數，當執行完mounted就表示實例已經被完全創建好了 // ，此時如果沒有其他操作的話，這個實例就在我們的內存當中 }, // 接下來是運行中的兩個事件 beforeUpdate(){ // 這時候表示我們的界面還沒有被更新【數據被更新了嗎？數據肯定被更新了】 // 得出結論：當執行beforeUpdate的時候，頁面中的顯示數據還是舊的，此時data數據是最新的，頁面尚未和最新的數據保持同步 }, updated(){ // updated 事件執行的時候，頁面和data數據已經保持同步了，都是最新的 }, beforeDestroy(){ // 當執行beforeDestroy鈎子函數的時候Vue實例就已經從運行階段，進入到了銷毀階段； // 當執行beforeDestroy的時候，是實例身上所有的data和所有的methods，以及過濾器，指令......都 // 處於可用狀態，此時還沒有真正的執行銷毀的過程 }, destroyed(){ // 當執行到destroyed函數的時候，組件已經被完全銷毀了，此時，組件中所有的數據，方法，指令，過濾器...... // 都已經不可用了 } }) </script> </html>