Vue生命周期三大階段 概述
第一個大階段 ： 掛載階段 (進入頁面階段)
（1）數據初始化；（2）找模板；（3）DOM 渲染
第二個大階段 ： 更新階段 (數據發生變化)
第三個大階段 ： 銷毀階段 (頁面關閉)
第一個大階段 ： 掛載階段 (4個鈎子)
第 1 個小階段 ： 數據初始化 ==> msg ： 測試信息
- beforeCreate()
- 數據響應式之前調用
- 特點 ： 無法獲取到數據和事件
- created() (★★★★★) 【created：重在操作數據，mounted：重在操作DOM。】
- 數據響應式之后調用
- 特點 ： 可以獲取數據和事件
- 場景 ：
1.發送 ajax
2.操作 data
3.操作本地數據 (操作數據)
第 2 個小階段 ： 找模板
{{ msg }}
- 詢問 有沒有
el配置項 ==> 有 => 繼續下一步
==> 沒有 => vm.$mount('#app') => 繼續下一步 - 詢問 有沒有
template配置項
==> 沒有 => el 的 outerHTML 作為模板進行編譯 【瀏覽器不認識v-xxx、@等，vue要編譯成瀏覽器認識的標記。】
==> 有 => 將 template 的值進行編譯 - 目的 ： 找模板
- 結論 ： template優先級 > el
第 3 個小階段 ： DOM 渲染 ==>
測試信息
-
beforeMount()
-
DOM 渲染之前調用
-
特點 ：
{{ msg }}
-
mounted() (★★★★)
-
DOM 渲染之后調用
-
特點 ：
測試信息
-
場景 ：
1.發送 ajax
2.操作 DOM
第二個大階段 ： 更新階段 (2個鈎子)
- beforeUpdate()
- 數據更新之前
- 測試信息
- updated()
- 數據更新之后
- 測試信息123
第三個大階段 ： 銷毀卸載階段 (2個鈎子)
- beforeDestroy()
- 銷毀之前
- 可以 清除開發人員自己添加的定時器等
- destroyed()
- 銷毀之后
控制台中，使用$destroy()模擬銷毀階段。
五、生命周期函數
- 所有的 vue 組件，都是 vue 實例， 一個組件對應一個實例，並且接收相同的選項對象(一些根實例特有的選項除外)
- 實例生命周期也叫做 ： 組件生命周期
生命周期介紹
- 簡單說 ： 一個組件(實例) 從開始到最后消滅所經歷的各種狀態，就是一個組件(實例)的生命周期
- 生命周期鈎子函數的定義 ： 從組件被創建，到組件掛在到頁面上運行，再到頁面關閉組件被銷毀，這三個階段總是伴隨着組件各種的事件，這些事件，統稱為組件的生命周期函數 (簡稱 ： 鈎子函數)
- 開發人員可以通過 vue 提供的鈎子函數，讓我們寫的代碼參與到 vue 的生命周期里面來，讓我們的代碼在合適的階段起到相應的作用
注意 ：
- 注意 ： vue 在執行過程中 會自動調用
生命周期鈎子函數， 我們只需要提供這些鈎子函數即可 - 注意 ： 鈎子函數的名稱都是 vue 中規定好的
5.0 學習 vue 組件生命周期 學什么?
- Vue 內部執行的流程(nan)
- 鈎子函數如何使用 (兩個重要的鈎子函數 created mounted)
5.1 鈎子函數 - beforeCreate
- 說明 ： 在實例初始化之前，數據觀測 和 event/watcher 事件配置之前被調用
- 組件實例剛被創建，組件屬性計算之前， 例如 data 屬性 methods 屬性
- 注意 ： 此時，無法獲取 data 中的數據 和 methoids 中的方法
- 場景 ： 幾乎不用
5.2 鈎子函數 - created (掌握)
- 說明 ： 組件實例創建完成，屬性已綁定， 可以調用 methods 中的方法、可以獲取 data 值
- vue 實例生命周期 參考 1
- vue 實例生命周期 參考 2
- 使用場景 ： 1-發送 ajax 2-本地存儲獲取數據
beforeCreate() {
// 無法獲取數據和事件
console.warn('beforeCreate'， this.msg， this.fn)
}，
created() {
console.warn('created'， this.msg， this.fn)
}
Has 'el' option ?
- YES => 就是正常的 el 邊界
- NO => 可以注釋，但是必須要手動添加
vm.$mount(el)去指定邊界
vm.$mount('#app')
Has template option?
- No => 將 el 的 outerHtml 作為模板進行編譯 ( outerHTML = 自身 + innerHTML )
- YES =>
// 如果提供了 template， 那么 vue 就會將 template 的內容進行編譯，編譯后，替換頁面中 vue 管理的邊界
template ： `
<h1>嘻嘻</h1>
`，
5.3 鈎子函數 - beforeMounted()
- 說明 ： 在掛載開始之前被調用 (掛載：可以理解DOM 渲染)
5.3 鈎子函數 - mounted() (掌握)
-
說明 ： 掛載之后， DOM 完成渲染
-
使用場景 ： 1-發送 ajax 2-操作 DOM
-
記得把template去掉 // 渲染DOM之前 beforeMount() { // 渲染之前的 <h1 id="h1" @click="fn">{{ msg }}</h1> console.log(document.querySelector('h1')) }， // 渲染DOM之后 <h1 id="h1">測試</h1> mounted() { console.log(document.querySelector('h1')) }
5.4 鈎子函數 - beforeUpdated()
-
說明：數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程。
-
注意：此處獲取的數據是更新后的數據，但是獲取頁面中的 DOM 元素是更新之前的
小提示 ： 打印 this.$el ，打開小三角是之后的，是因為打印是有監聽的功能，展示的是后面更改之后的
5.5 鈎子函數 - updated()
-
說明：組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。
-
beforeUpdate() { // 更新之前的值 ： 信息 console.warn('beforeUpdate'，document.querySelector('h1').innerText) }， updated() { // 更新之后的值 ： 信息1111 console.warn('updated'， document.querySelector('h1').innerText) }
5.6 鈎子函數 - beforeDestroy()
- 說明：實例銷毀之前調用。在這一步，實例仍然完全可用。
- 使用場景：實例銷毀之前，執行清理任務，比如：清除定時器等
created() {
this.timerId = setInterval(() => {
console.log(1111);
}， 500);
}，
// 如果當組件銷毀了，還不清除定時器會出現性能問題
// 在瀏覽器中可以嘗試銷毀 vm.$destroy()
// 最后銷毀
beforeDestroy() {
clearInterval(this.timerId)
}，
5.7 鈎子函數 - destroyed()
說明：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
【瀏覽器控制台不是console時，按esc鍵，可以在同一屏下方顯示console。】
【windows + s：搜索】
01-生命周期演示.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
控制台elements中，點擊某個元素，$0就是當前元素，控制台中，$0.outerHTML就是當前元素，$0.innerHTML就元素的innerHTML
-->
<div id="app">
<h1>{{ msg }}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
// template: `<div>大傻春在此</div>`,
data: {
msg: '測試信息',
timerId: '' // null比較好
},
methods: {
fn() {}
},
// 數據響應式：將data的數據交給當前Vue的實例對象
// 數據響應式之前調用
// 特點 : 獲取不到數據和事件
// 場景 : 極少
beforeCreate() {
// beforeCreate: undefined undefined
console.warn('beforeCreate:', this.msg, this.fn)
},
// 數據響應式之后調用 【數據響應已經完成。】
// 特點 : 可以獲取到數據和事件
// 場景 : 1.發送ajax 2.可以操作data里的數據 3.操作本地數據
// 一句話：操作數據
created() {
// beforeCreate: undefined undefined
console.warn('created:', this.msg, this.fn)
this.timerId = setInterval(() => {
console.log('春春說:好嗨喲....');
}, 1000);
},
// DOM渲染之前
// 特點 :<h1>{{ msg }}</h1>
beforeMount() {
// beforeMount: <h1>{{ msg }}</h1>
console.warn('beforeMount:', document.querySelector('h1'))
},
// DOM渲染之后
// 特點 : <h1>測試信息</h1>
// 場景 : 1.發送ajax 2.操作DOM (操作DOM)
mounted() {
// mounted: <h1>測試信息</h1>
console.warn('mounted:', document.querySelector('h1'))
},
//-------------------------華麗的分割線-------------------------
// 更新【DOM】數據之前
// 特點 : 測試信息
beforeUpdate() {
// 測試信息
console.warn('beforeUpdate:', document.querySelector('h1').innerText);
},
// 更新【DOM】數據之后
// 特點 : 測試信息123
updated() {
// 測試信息123
console.warn('updated:', document.querySelector('h1').innerText);
},
//-------------------------華麗的分割線-------------------------
// 控制台中，使用$destroy()模擬銷毀階段。
// 銷毀之前
beforeDestroy() {
console.warn('beforeDestroy');
clearInterval(this.timerId)
},
// 銷毀之后
destroyed() {
console.warn('destroyed');
},
})
// vm.$mount('#app') // 手動專門指定一下邊界
</script>
</body>
</html>
六 、使用鈎子函數來完善 數據存儲
created() {
this.list = JSON.parse(localStorage.getItem('list')) || []
}