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

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

請?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實例</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);//當(dāng)前掛載元素
                document.querySelector('h3').innerText = '1'//無效，虛擬dom
            },
            mounted() {
                // document.querySelector('h3').innerText = '1'//有效，已轉(zhuǎn)化為真實dom
            },
            beforeUpdate() {
                console.log('====beforeUpdate====');
                console.log(this.information);
                // debugger;//斷點調(diào)試
            },
            updated() {
                console.log(this.information);
            },
            beforeDestroy() {
                console.log('我要被銷毀了');
            },
            destroyed() {
                console.log('銷毀完畢');
            },
        })
    </script>
</body>
</html>

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

常用的生命周期鉤子：

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

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

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

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

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

在線工具

數(shù)據(jù)庫

CMS

常用工具

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

目錄

1、什么是生命周期