生命週期函數
- 所有的vue組件,都是vue實例,一個組件對應一個實例,並且接收相同的選項對象(一些根實例特有的選項除外)
- 實例生命週期也叫:組件生命週期
- 組件 :
- 看做是一個個可複用的ui模塊
- 組件本質上市一個vue實例
生命週期介紹
- 簡單說 : 一個組件(實例)從開始到最後消滅所經歷的各種狀態就是一個組件(實例)的生命週期
- 生命週期鉤子函數的定義:從組件被創建,到組件掛在頁面上運行,載到頁面關閉組件被銷燬,這三個階段總是總是伴隨着組件各種的事件,這些事件,統稱爲組件的生命週期函數(簡稱:鉤子函數)
- 開發人員可以通過vue提供的鉤子函數,讓我們寫的代碼參與到vue的生命週期中,讓我們的代碼在覈實的階段起到響應的作用
注意 :
- 注意 : vue在執行過程中會 自動調用 生命週期鉤子函數 , 我們只需要提供這些鉤子函數即可
- 注意 : 鉤子函數的名稱都是vue中規定好的
學習vue組件生命週期 學什麼?
- Vue內部執行的流程(難)
- 鉤子函數如何使用(兩個重要的鉤子函數 created mounted)
1.創建之前 - beforeCreate
- 說明 : 在實例初始化之前,數據觀測和 event/watch 事件配置之前被調用
- 組件實例剛被創建, 組件屬性計算之前, 例如 : data屬性 methods 屬性
- 注意 : 此時,無法獲取data中的數據和methods中的方法
- 場景 :幾乎不用
2. 創建 - created(掌握重點)
- 說明 : 組件實例創建完成,屬性已綁定, 可以調用 methods 中的方法 , 可以獲取data值
- [vue 實例生命週期 參考 1]
- [vue 實例生命週期 參考 2]
- 使用場景 : 1 - 發送ajax 2 - 本地存儲獲取數據 3 - 操作data裏的數據
-
beforeCreate(){ // 無法獲取數據和事件 console.warn('beforeCreate',this.msg,this.fn) }, created(){ console.warn('created', this.msg,this.fn) }
有 ' el ' 選項嗎?
- YES => 就是正常的 el 邊界
- NO => 可以註釋,但是必須要手動添加 vm.$mount(el) 去指定邊界 vm.$mount('#app')
有 ' template ' 選項嗎?
- NO => 將el 的 outerHtml 作爲模板進行編譯(outerHTML = 自身+ innerHTML )
- YES =>
// 如果提供了template , 那麼 vue就會將tempalte的內容進行編譯,編譯後,替換頁面中vue管理的邊界 template : `<h1> 嘻嘻 </h1>`
3. 裝載之前 - beforeMounted()
- 說明 : 在掛載開始之前被調用(掛載:可以理解爲DOM渲染)
4. 裝載 - mounted(掌握)
- 說明 : 掛載之後,DOM完成渲染
- 使用場景 : 1- 發送ajax請求 2 - 操作DOM
-
記得把template去掉 // 渲染DOM之前 beforeMount(){ // 渲染之前的<h1 id="h1" @click="fn">{{ msg }}</h1> consolg.log(document.querySelector('h1')) }, // 渲染DOM之後 <h1>測試</h1> mounted(){ console.log(document.querySelector('h1')) }
5. 更新之前 - beforeUpdated()
- 說明 : 數據更新時調用,發生在虛擬DOM重新渲染和打補丁之前,可以在這個鉤子中進一步的更改狀態,這不會觸發附加的重渲染過程
- 注意 : 此處獲取的數據是更新後的數據,但是獲取頁面中的DOM元素是更新之前的
小提示: 打印this.$el , 打開小三角之後的,是應爲你打印是有監聽的功能,展示的是後面更改之後的
6. 更新 - updated()
- 說明: 組件DOM已經更新,所以你現在可以執行依賴於DOM的操作
-
beforeUpdate(){ // 更新之前的值 : 信息 consolg.warn('beforeUpdate',document.querySelector('h1').innerText) }, updated(){ // 更新之後的值 : 信息111 console.warn('updated',document.querySelector('h1').innerText) }
7. 銷燬之前 - beforeDestroy()
- 說明 : 實例銷燬之前調用 , 在這一步, 實例仍然完全可用
- 使用場景 : 實例銷燬之前,執行清除任務, 比如 : 清除定時器等
created(){
this.timerId = setInterval(()=>{
console.log(111)
},500)
},
// 如果當組件銷燬了,還不清楚定時器,就會出現性能問題
// 在瀏覽器中可以嘗試銷燬 vm$destroy()
// 最後銷燬
beforeDestroy(){
clearInterval(this.timerId)
}
8. 銷燬 - destroyed()
說明 : Vue實例銷燬後調用.調用後,vue實例指示的所有東西會解綁,誰有的事件監聽會被移除,所有的子實例也會被銷燬
二. 使用鉤子函數來完善數據存儲(created創建)
created{
this.list = JSON.parse(localStorage.getItem('list'))
}