快捷導(dǎo)航

淺談一下Vue技術(shù)棧之生命周期

更新時(shí)間：2023年05月05日 11:23:14 作者：東方青云、

這篇文章主要介紹了淺談一下Vue技術(shù)棧之生命周期,每一個(gè)vue實(shí)例從創(chuàng)建到銷毀的過程，就是這個(gè)vue實(shí)例的生命周期,這些過程中會(huì)伴隨著一些函數(shù)的自調(diào)用,需要的朋友可以參考下

1、什么是生命周期

又名：生命周期回調(diào)函數(shù)、生命周期函數(shù)、生命周期鉤子。
是什么：Vue在關(guān)鍵時(shí)刻幫我們調(diào)用的一些特殊名稱的函數(shù)。
生命周期函數(shù)的名字不可更改，但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫的。
生命周期函數(shù)中的this指向是vm 或 組件實(shí)例對(duì)象。

2、分析生命周期

2.1 生命周期鉤子函數(shù)

每個(gè)Vue實(shí)例在創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程。例如，需要設(shè)置數(shù)據(jù)偵聽、編譯些生命周期鉤子函數(shù)，給用戶在不同階段添加代碼的機(jī)會(huì)。

2.2 生命周期鉤子函數(shù)的作用

有一些其他鉤子，在實(shí)例生命周期的不同階段被調(diào)用，如 mounted, updated 和 destroyed。
生命周期鉤子的 this關(guān)鍵字上下文指向調(diào)用它的 Vue 實(shí)例，調(diào)用方法如 this.$el。

注：不能使用箭頭函數(shù)(()=>)定義一個(gè)生命周期方法，如created:()=> this.fetchTodos()。這是因?yàn)榧^函數(shù)綁定了父上下文，因此 this與期待的Vue實(shí)例不同，this.fechTodos()的行為未定義。

2.3 生命周期鉤子函數(shù)圖例

請(qǐng)?zhí)砑訄D片描述

基本語法：

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')
			}

語法說明：

Vue 實(shí)例有一個(gè)完整的生命周期，即 Vue 實(shí)例從創(chuàng)建到銷毀的過程。具體可細(xì)分為開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載 DOM 渲染、更新渲染、卸載等一系列過程，稱為 Vue 的生命周期。在 Vue 的整個(gè)生命周期中，提供了一些生命周期鉤子函數(shù)，為執(zhí)行自定義邏輯提供了機(jī)會(huì)。

beforeCreate：在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)和 event/watch 事件配置之前被調(diào)用。
created：實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)、屬性和方法的運(yùn)算、event/watch 事件回調(diào)。然而，掛載階段還沒有開始，$el 屬性目前不可見。
beforeMount：在掛載開始之前被調(diào)用，相關(guān)的渲染函數(shù)首次被調(diào)用。在此階段，它檢查是否有任何模板可用于要在 DOM 中呈現(xiàn)的對(duì)象：如果沒有找到模板，那么將所定義元素的外部 HTML 視為模板。
mounted：el 被新創(chuàng)建的 vm. $el 替換，并掛載到實(shí)例上，之后調(diào)用該鉤子。一旦模板準(zhǔn)備就緒，它將數(shù)據(jù)放入模板并創(chuàng)建可呈現(xiàn)元素。
beforeUpdate：數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前?？梢栽诖算^子中進(jìn)一步更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過程。
updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在此之后調(diào)用該鉤子。通過實(shí)際更新 DOM 對(duì)象并觸發(fā)updated 鉤子，屏幕上的變化得到呈現(xiàn)。
beforeDestroy：實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。在 Vue 對(duì)象被破壞并從內(nèi)存中釋放之前，beforeDestroy 鉤子被觸發(fā)，并允許在其中處理自定義代碼。
destroyed：Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁，所有事件偵聽器會(huì)被移除，所有子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。可以使用生命周期鉤子函數(shù)在 Vue對(duì)象生命周期的不同階段添加自定義代碼。它將幫助設(shè)計(jì)人員控制在 DOM 中創(chuàng)建對(duì)象的流程，以及更新和刪除對(duì)象。

完整生命周期鉤子函數(shù)調(diào)用關(guān)系如下圖所示：

請(qǐng)?zhí)砑訄D片描述

2.4 生命周期鉤子函數(shù)的應(yīng)用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>{{information}}</h3>
        <button @click="changeInformation">改變信息</button>
        <button @click="destroyVM">銷毀Vue實(shí)例</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    information: '東方青云歡迎您'
                }
            },
            methods: {
                changeInformation() {
                    this.information = '我來了，您在哪里？'
                },
                destroyVM() {
                    this.$destroy()//銷毀Vue實(shí)例
                }
            },
            beforeCreate() {
                console.log('=====beforeCreate=====')
                console.log('el:' + this.$el)//未定義
                console.log("data:" + this.$data)//未定義
                console.log('=====beforeCreate=====')
            },
            created() {
                console.log('====created=====');
                console.log('el:' + this.$el)//未定義
                console.log("data:" + this.$data)//已被初始化為[object Object]
                console.log("information:" + this.information);//information:東方青云歡迎您
                console.log('====created=====');
            },
            beforeMount() {
                console.log('====beforeMount====');
                console.log('el:' + this.$el);//el:[object HTMLDivElement]
                console.log(this.$el);//當(dāng)前掛載元素
                document.querySelector('h3').innerText = '1'//無效，虛擬dom
            },
            mounted() {
                // document.querySelector('h3').innerText = '1'//有效，已轉(zhuǎn)化為真實(shí)dom
            },
            beforeUpdate() {
                console.log('====beforeUpdate====');
                console.log(this.information);
                // debugger;//斷點(diǎn)調(diào)試
            },
            updated() {
                console.log(this.information);
            },
            beforeDestroy() {
                console.log('我要被銷毀了');
            },
            destroyed() {
                console.log('銷毀完畢');
            },
        })
    </script>
</body>
</html>

3、生命周期總結(jié)

常用的生命周期鉤子：

mounted: 發(fā)送ajax請(qǐng)求、啟動(dòng)定時(shí)器、綁定自定義事件、訂閱消息等【初始化操作】。
beforeDestroy: 清除定時(shí)器、解綁自定義事件、取消訂閱消息等【收尾工作】。

關(guān)于銷毀Vue實(shí)例:

銷毀后借助Vue開發(fā)者工具看不到任何信息。
銷毀后自定義事件會(huì)失效，但原生DOM事件依然有效。
一般不會(huì)在beforeDestroy操作數(shù)據(jù)，因?yàn)榧幢悴僮鲾?shù)據(jù)，也不會(huì)再觸發(fā)更新流程了。

到此這篇關(guān)于淺談一下Vue技術(shù)棧之生命周期的文章就介紹到這了,更多相關(guān)Vue技術(shù)棧的生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

淺談一下Vue技術(shù)棧之生命周期

目錄

1、什么是生命周期