vue.js生命週期

1.beforeCreate()
// 這是我們遇到的第一個生命週期函數，表示實例完全被創建出來之前，會執行它
// console.log(this.msg)
// this.show()
// 注意： 在 beforeCreate 生命週期函數執行的時候，data 和 methods 中的 數據都還沒有沒初始化
2.created()
// 這是遇到的第二個生命週期函數
// console.log(this.msg)
// this.show()
//  在 created 中，data 和 methods 都已經被初始化好了！
// 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作
3.beforeMount()
// 這是遇到的第3個生命週期函數，表示 模板已經在內存中編輯完成了，但是尚未把 模板渲染到 頁面中
// console.log(document.getElementById('h3').innerText)
// 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串
4.mounted()
// 這是遇到的第4個生命週期函數，表示，內存中的模板，已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了
// console.log(document.getElementById('h3').innerText)
// 注意： mounted 是 實例創建期間的最後一個生命週期函數，當執行完 mounted 就表示，實例已經被完全創建好了，此時，如果沒有其它操作的話，這個實例，就靜靜的 躺在我們的內存中，一動不動
beforeUpdate()
// 這時候，表示 我們的界面還沒有被更新【數據被更新了嗎？  數據肯定被更新了】
// 得出結論： 當執行 beforeUpdate 的時候，頁面中的顯示的數據，還是舊的，此時 data 數據是最新的，頁面尚未和 最新的數據保持同步
updated()
// updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的