站長(zhǎng)資訊網(wǎng)
vue3改了4個(gè)生命周期函數(shù)。Vue3組合式api取消了beforeCreated和created鉤子函數(shù)，采用steup鉤子代替，且里面不能使用this。Vue3里面的組件銷毀的鉤子函數(shù)由destroyed和beforeDestroy換成了beforeUnmount和unmounted。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
Vue實(shí)例有一個(gè)完整的生命周期，也就是從new Vue()、初始化事件(.once事 件)和生命周期、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等?系列過程，稱這是Vue的生命周期。
vue應(yīng)用程序中有4個(gè)主要事件(8個(gè)鉤子)：
創(chuàng)建 —- 在組建創(chuàng)建時(shí)執(zhí)行
掛載 —- DOM被掛載時(shí)執(zhí)行
更新 —- 當(dāng)響應(yīng)數(shù)據(jù)被修改時(shí)執(zhí)行
銷毀 —-在元素被銷毀之前立即執(zhí)行
數(shù)據(jù)監(jiān)測(cè)(getter和setter)和初始化事件還未開始，此時(shí) data 的響應(yīng)式追蹤、
event/watcher 都還沒有被設(shè)置
不能訪問到data、computed、watch、methods上的方法和數(shù)據(jù)。
創(chuàng)建完成后會(huì)自動(dòng)執(zhí)行函數(shù)
在掛載開始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用。
這次Vue開始解析模板，生成虛擬DOM存在內(nèi)存中，還沒有把虛擬DOM轉(zhuǎn)換成真實(shí)DOM，插入頁面中
在el被新創(chuàng)建的 vm.$el（就是真實(shí)DOM的拷貝）替換，并掛載到實(shí)例上去之后調(diào)用（將內(nèi)存中的虛擬DOM轉(zhuǎn)為真實(shí)DOM，真實(shí)DOM插入頁面）。
一般在這個(gè)階段進(jìn)行：開啟定時(shí)器，發(fā)送網(wǎng)絡(luò)請(qǐng)求，訂閱消息，綁定自定義事件等等
響應(yīng)式數(shù)據(jù)更新時(shí)調(diào)用，此時(shí)雖然響應(yīng)式數(shù)據(jù)更新，但是對(duì)應(yīng)的真實(shí) DOM 還沒有被渲染（數(shù)據(jù)是新的，但頁面是舊的，頁面和數(shù)據(jù)沒保持同步呢）。
由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。
調(diào)用時(shí)，組件 DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)
實(shí)例銷毀之前調(diào)用
在這個(gè)階段一般進(jìn)行關(guān)閉定時(shí)器，取消訂閱消息，解綁自定義事件。
實(shí)例銷毀后調(diào)用，調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)端渲染期間不被調(diào)用。
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>分析生命周期</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準(zhǔn)備好一個(gè)容器--> <div id="root" :x="n"> <h2 v-text="n"></h2> <h2>當(dāng)前的n值是：{{n}}</h2> <button @click="add">點(diǎn)我n+1</button> <button @click="bye">點(diǎn)我銷毀vm</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。 new Vue({ el:'#root', // template:` // <div> // <h2>當(dāng)前的n值是：{{n}}</h2> // <button @click="add">點(diǎn)我n+1</button> // </div> // `, data:{n:1}, methods: { add(){ console.log('add') this.n++ }, bye(){ console.log('bye') this.$destroy() } }, watch:{ n(){ console.log('n變了') } }, beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeMount') }, mounted() { console.log('mounted') }, beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, beforeDestroy() { console.log('beforeDestroy') }, destroyed() { console.log('destroyed') }, }) </script></html>
常用的生命周期鉤子：
1.mounted: 發(fā)送ajax請(qǐng)求、啟動(dòng)定時(shí)器、綁定自定義事件、訂閱消息等【初始化操作】。
2.beforeDestroy: 清除定時(shí)器、解綁自定義事件、取消訂閱消息等【收尾工作】
關(guān)于銷毀Vue實(shí)例:
(1)銷毀后借助Vue開發(fā)者工具看不到任何信息。
(2)銷毀后自定義事件會(huì)失效，但原生DOM事件依然有效。
(3)一般不會(huì)在beforeDestroy操作數(shù)據(jù)，因?yàn)榧幢悴僮鲾?shù)據(jù)，也不會(huì)再觸發(fā)更新流程了。
在掛載之前被調(diào)用，渲染函數(shù)render首次被調(diào)用
組件掛載時(shí)調(diào)用
數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前。
因數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁時(shí)調(diào)用
在卸載組件實(shí)例之前調(diào)用，此階段的實(shí)例依舊是正常的。
卸載組件實(shí)例后調(diào)用，調(diào)用此鉤子時(shí)，組件實(shí)例的所有指令都被解除綁定，所有事件偵聽器都被移除，所有子組件實(shí)例被卸載。
| vue2 | vue3 |
|---|---|
| beforeCreate | setup() 開始創(chuàng)建組件之前，創(chuàng)建的是data和method |
| created | setup() |
| beforeMount | onBeforeMount 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù)。 |
| mounted | onMounted 組件掛載完成后執(zhí)行的函數(shù) |
| beforeUpdate | onBeforeUpdate 組件更新之前執(zhí)行的函數(shù)。 |
| updated | onUpdated 組件更新完成之后執(zhí)行的函數(shù)。 |
| beforeDestroy | onBeforeUnmount 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù)。 |
| destroyed | onUnmounted 組件卸載之前執(zhí)行的函數(shù)。 |
總結(jié):
1、Vue3 組合式api取消了 beforeCreated 和 created 鉤子函數(shù) ， 采用steup鉤子代替 且里面不能使用 this
2、Vue3里面的組件銷毀的鉤子函數(shù)換成了 beforeUnmount 和 unmounted 之前是 destroyed和beforeDestroy 但是要注意 如果Vue3 使用 Vue2 的選擇式寫法 之前的鉤子函數(shù)還是可以使用
3、Vue3的組合式api生命周期函數(shù) 要比Vue2 選擇式 api 的生命周期多個(gè)前綴 on ，而且要 import 單獨(dú)引入
