淺談一下Vue技術棧之生命周期

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

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

1、什么是生命周期

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

2、分析生命周期

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

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

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

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

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

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

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

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

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

請?zhí)砑訄D片描述

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

<!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實例</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    information: '東方青云歡迎您'
                }
            },
            methods: {
                changeInformation() {
                    this.information = '我來了，您在哪里？'
                },
                destroyVM() {
                    this.$destroy()//銷毀Vue實例
                }
            },
            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);//當前掛載元素
                document.querySelector('h3').innerText = '1'//無效，虛擬dom
            },
            mounted() {
                // document.querySelector('h3').innerText = '1'//有效，已轉化為真實dom
            },
            beforeUpdate() {
                console.log('====beforeUpdate====');
                console.log(this.information);
                // debugger;//斷點調試
            },
            updated() {
                console.log(this.information);
            },
            beforeDestroy() {
                console.log('我要被銷毀了');
            },
            destroyed() {
                console.log('銷毀完畢');
            },
        })
    </script>
</body>
</html>