溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“vue3生命周期函數(shù)改了幾個”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue3生命周期函數(shù)改了幾個”文章吧。
vue3改了4個生命周期函數(shù)。Vue3組合式api取消了beforeCreated和created鉤子函數(shù)，采用steup鉤子代替，且里面不能使用this。Vue3里面的組件銷毀的鉤子函數(shù)由destroyed和beforeDestroy換成了beforeUnmount和unmounted。
Vue實(shí)例有一個完整的生命周期，也就是從new Vue()、初始化事件(.once事 件)和生命周期、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等?系列過程，稱這是Vue的生命周期。
vue應(yīng)用程序中有4個主要事件(8個鉤子)：
創(chuàng)建 ---- 在組建創(chuàng)建時執(zhí)行
掛載 ---- DOM被掛載時執(zhí)行
更新 ---- 當(dāng)響應(yīng)數(shù)據(jù)被修改時執(zhí)行
銷毀 ----在元素被銷毀之前立即執(zhí)行
Vue2的生命周期
（1） beforeCreate（創(chuàng)建前)
數(shù)據(jù)監(jiān)測(getter和setter)和初始化事件還未開始，此時 data 的響應(yīng)式追蹤、
event/watcher 都還沒有被設(shè)置
不能訪問到data、computed、watch、methods上的方法和數(shù)據(jù)。
（2）created（創(chuàng)建后)
創(chuàng)建完成后會自動執(zhí)行函數(shù)
（3） beforeMount（掛載前）
在掛載開始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用。
這次Vue開始解析模板，生成虛擬DOM存在內(nèi)存中，還沒有把虛擬DOM轉(zhuǎn)換成真實(shí)DOM，插入頁面中
（4）mounted（掛載后）
在el被新創(chuàng)建的 vm.$el（就是真實(shí)DOM的拷貝）替換，并掛載到實(shí)例上去之后調(diào)用（將內(nèi)存中的虛擬DOM轉(zhuǎn)為真實(shí)DOM，真實(shí)DOM插入頁面）。
一般在這個階段進(jìn)行：開啟定時器，發(fā)送網(wǎng)絡(luò)請求，訂閱消息，綁定自定義事件等等
（5）beforeUpdate（更新前）
響應(yīng)式數(shù)據(jù)更新時調(diào)用，此時雖然響應(yīng)式數(shù)據(jù)更新，但是對應(yīng)的真實(shí) DOM 還沒有被渲染（數(shù)據(jù)是新的，但頁面是舊的，頁面和數(shù)據(jù)沒保持同步呢）。
（6）updated（更新后）
由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。
調(diào)用時，組件 DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會導(dǎo)致更新無限循環(huán)
（7）beforeDestroy（銷毀前）
實(shí)例銷毀之前調(diào)用
在這個階段一般進(jìn)行關(guān)閉定時器，取消訂閱消息，解綁自定義事件。
（8）destroyed（銷毀后）
實(shí)例銷毀后調(diào)用，調(diào)用后，Vue 實(shí)例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀。該鉤子在服務(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)備好一個容器-->
<div id="root" :x="n">
<h4 v-text="n"></h4>
<h4>當(dāng)前的n值是：{{n}}</h4>
<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 在啟動時生成生產(chǎn)提示。
new Vue({
el:'#root',
// template:`
// <div>
// <h4>當(dāng)前的n值是：{{n}}</h4>
// <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請求、啟動定時器、綁定自定義事件、訂閱消息等【初始化操作】。
2.beforeDestroy: 清除定時器、解綁自定義事件、取消訂閱消息等【收尾工作】
關(guān)于銷毀Vue實(shí)例:
(1)銷毀后借助Vue開發(fā)者工具看不到任何信息。
(2)銷毀后自定義事件會失效，但原生DOM事件依然有效。
(3)一般不會在beforeDestroy操作數(shù)據(jù)，因?yàn)榧幢悴僮鲾?shù)據(jù)，也不會再觸發(fā)更新流程了。
Vue3的生命周期
（1） onBeforeMount
在掛載之前被調(diào)用，渲染函數(shù)render首次被調(diào)用
（2） onMounted
組件掛載時調(diào)用
（3） onBeforeUpdate
數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前。
（4） onUpdated
因數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁時調(diào)用
（5） onBeforeUnmount
在卸載組件實(shí)例之前調(diào)用，此階段的實(shí)例依舊是正常的。
（6） onUnmounted
卸載組件實(shí)例后調(diào)用，調(diào)用此鉤子時，組件實(shí)例的所有指令都被解除綁定，所有事件偵聽器都被移除，所有子組件實(shí)例被卸載。
vue2與vue3在生命周期的區(qū)別
| 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ù)。 |
以上就是關(guān)于“vue3生命周期函數(shù)改了幾個”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼