前言
vue的生命周期其實可以分為兩塊,一個是vue實例的生命周期,一個是組件的生命周期。
vue實例的生命周期方法共有4個:$mout,$forceUpdate,$nextTick,$destroy
vue組件的生命周期鉤子共有8個:beforeCreate,created,beforeMount,mounted,beforeUpdate,
updated,beforeDestroy,destroyed
以及keep-alive獨有的2個生命周期鉤子:activated,deactivated
vue實例的生命周期
$mount
給構建vue實例綁定具體的demo節點
必須使用的一個生命周期調用函數,如果你感覺你好像沒用他的話,請去看你的入口文件main.js
new Vue({render: h => h(App),
}).$mount('#app')?$forceUpdate
強制刷新當前組件,可以在任何vue組件中使用
這個根據你的業務場景來,比如你的組件很復雜,涉及到大量且比較深的節點嵌套,導致你的視圖和數據不一致,就可以使用這個函數去更新當前組件,重新渲染。
這個函數的使用看場景
//直接這么使用就行
this.$forceUpdate()?$nextTick
在dom完成最后一次渲染之后進行執行的鉤子。
這個大家應該不陌生,很多業務場景都能用到,比如請求的數據比較多,并且涉及到視圖的修改。比如圖片資源等等,就需要使用$nextTick做一個異步的操作。
this.$nextTick(()=>{//...視圖渲染完成后再執行的邏輯
})$destroy
手動銷毀一個組件。
其實官方也不推薦這么做,因為你要銷毀一個組件,要么是路由跳轉走了,要么是v-if控制他的銷毀。
我至今開發的業務中,也沒有遇到什么場景需要我操作這個函數,這里只是說明一下,他會調用組件的 beforeDestory和destory鉤子函數。
this.$destroy()vue組件的生命周期
vue組件的8個生命周期,語義化也很明顯,作者給的圖也很通俗易懂,形象的很。
生命周期圖
beforeCreated
官方說明:在實例初始化之后,進行數據偵聽和事件/偵聽器的配置之前同步調用。
大白話:組件實例生成了,但是數據,事件,wtach之類屬性的還沒有加載
created
官方說明:在實例創建完成后被立即同步調用。在這一步中，實例已完成對選項的處理，意味著以下內容已被配置完畢：數據偵聽、計算屬性、方法、事件/偵聽器的回調函數。然而，掛載階段還沒開始，且?$el?property 目前尚不可用。
大白話:這個時候你在<script>標簽內定義的數據,事件,watch之類的屬性那些東西都可以用了,但是<template>里面的節點還不存在
beforeMount
官方說明:在掛載開始之前被調用：相關的?render?函數首次被調用。
大白話:render函數首次被調用,開始解析你的<template>。但是<template>里定義的東西還是沒掛載上去,不能訪問。
mounted
官方說明:實例被掛載后調用，這時?el?被新創建的?vm.$el?替換了。如果根實例掛載到了一個文檔內的元素上，當?mounted?被調用時?vm.$el?也在文檔內。
注意?mounted?不會保證所有的子組件也都被掛載完成。如果你希望等到整個視圖都渲染完畢再執行某些操作，可以在?mounted?內部使用?vm.$nextTick：
大白話:<template>和<style>所創建的視圖都掛載完畢,可以訪問了。但是不代表你的子組件也完成了所有的渲染,這個看業務,萬一有一些復雜的邏輯。如果你想在視圖全部渲染完畢,你就在mounted內部使用this.$nextTick(()=>{//業務邏輯})?
beforeUpdate
官方說明:在數據發生改變后，DOM 被更新之前被調用。這里適合在現有 DOM 將要被更新之前訪問它，比如移除手動添加的事件監聽器。
大白話:數據改變了,視圖沒改變
updated
官方說明:在數據更改導致的虛擬 DOM 重新渲染和更新完畢之后被調用。
當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或?watcher?取而代之。
注意，updated?不會保證所有的子組件也都被重新渲染完畢。如果你希望等到整個視圖都渲染完畢，可以在?updated?里使用?vm.$nextTick：
大白話:視圖更新完成
deforeDestroy
官方說明:實例銷毀之前調用。在這一步，實例仍然完全可用。
大白話:數據視圖之類的都還在,不過這里是處理一些清除定時器,銷毀全局事件總線,或者pubsub接收等操作
destroyed
官方說明:實例銷毀后調用。該鉤子被調用后，對應 Vue 實例的所有指令都被解綁，所有的事件監聽器被移除，所有的子實例也都被銷毀。
大白話:所有的視圖層已經無法操作,但是data數據還在。
代碼測試
<template><div><el-input v-model="value" ref="inputRef"></el-input></div>
</template>
<script>
export default {name: 'Com1',data() {return {value: '默認值',}},beforeCreate() {console.log(this.value, 'beforeCreate鉤子內的value')console.log(this.$refs.inputRef, 'beforeCreate鉤子內的ref節點')},created() {console.log(this.value, 'created鉤子內的value')console.log(this.$refs.inputRef, 'created鉤子內的ref節點value')},beforeMount() {console.log(this.value, 'beforeMount鉤子內的value')console.log(this.$refs.inputRef, 'beforeMount鉤子內的ref節點')},mounted() {console.log(this.value, 'mounted鉤子內的value')console.log(this.$refs.inputRef, 'mounted鉤子內的ref節點value')},beforeUpdate() {console.log(this.value, 'beforeUpdate鉤子內的value')console.log(this.$refs.inputRef, 'beforeUpdate鉤子內的ref節點')},updated() {console.log(this.value, 'updated鉤子內的value')console.log(this.$refs.inputRef, 'updated鉤子內的ref節點')},beforeDestroy() {console.log(this.value, 'beforeDestroy鉤子內的value')console.log(this.$refs.inputRef, 'beforeDestroy鉤子內的ref節點')},destroyed() {console.log(this.value, 'destroyed鉤子內的value')console.log(this.$refs.inputRef, 'destroyed鉤子內的ref節點')},methods: {handler() {},}}
</script>初始化渲染的結果
?修改輸入框的值
?切換到其他組件
?
?簡單總結如下
| beforeCreated | 組件實例生成,但數據和事件,watch等無法使用 |
| created | data和methods等等可以使用,此階段可以調用http接口 |
| beforeMount | 初次調用render函數,模板開始編譯,但是沒有生成 |
| mounted | 數據,事件,watch和視圖都已掛載完畢,但是不能保證所有子組件都渲染完畢 |
| beforeUpdate | 數據改變,但視圖未改變 |
| updated | 視圖隨視圖改變也改變 |
| deforeDestroy | 組件銷毀前,數據,視圖,屬性等都可以正常操作,可以銷毀一些定時器和監聽 |
| destroyed? | 數據雖然在,但是視圖,watch,事件等屬性的已銷毀 |
?父子組件生命周期
這個東西在開發中還是很重要的,如果你要是將邏輯寫錯了地方,就會出錯
初始化渲染
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子組件更新
父beforeUpdate->子beforeUpdate->子updated->父updated
父組件更新
父beforeUpdate->父updated
銷毀
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
keep-alive緩存組件特有的生命周期
activated
keep-alive緩存的組件激活時觸發的鉤子函數
deactivated
keep-alive緩存的組件失活時觸發的鉤子函數
activated(){console.log('緩存組件激活時調用')},deactivated(){console.log('緩存組件失活時調用')},?感覺有用的給個贊吧!
