VUE生命週期

時間 2021-01-02

標籤 javascript html vue java npm app dom 異步函數學習欄目 JavaScript 简体版

原文原文鏈接

Vue實例從建立到銷燬的過程，就是生命週期。Vue中全部功能的實現都是圍繞其生命週期進行的，在生命週期的不一樣階段調用對應的鉤子函數實現組件數據管理與DOM渲染兩大重要功能。javascript

1、Vue生命週期共能夠分爲八個階段，分別爲：html

1.beforeCreated（建立前）vue

2.created（建立後）java

3.beforeMount（載入前）npm

4.mounted（載入後）app

5.beforeUpdate（更新前）dom

6.updated(更新後）異步

7.beforeDestroy（銷燬前）函數

8.destroyed（銷燬後）學習

2、Vue生命週期的做用是什麼？

它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程當中，更容易造成良好的邏輯。

3、第一次頁面加載時，會觸發哪些鉤子？

第一次頁面加載時會觸發beforCreate、created、beforeMount與mounted這幾個鉤子。

4、簡述每一個週期具體適合哪些場景

beforeCreate：能夠在這裏加載loading事件，在加載實例時觸發。

created：初始化完成時的事件能夠寫在這裏，好比此次此出處結束loading事件，異步請求也適宜在這裏調用。

mounted：掛載元素，獲取到DOM節點

updated：若是對數據統一處理，在這裏能夠寫上相應函數。

beforeDestroy：能夠作一個確認中止事件的確認框。

5、created與mounted的區別

created：在模板渲染成html前調用，即一般初始化某個屬性值，而後再渲染成視圖。

mounted：在模板渲染成html後調用，一般是初始化頁面完成後，再對html的DOM節點，進行一些操做。

6、關於生命週期的詳細介紹

接下來，能夠看下面代碼來學習：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <h1>{{message + '這是在outer HTML中的'}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    const app = new Vue({
        el: '#app',
        data: {
            message : "LJY learns more"
        },
        template:"<h1>{{message +'這是在template模板中的'}}</h1>",
        // render: function(createElement) {
        //     return createElement('h1', 'this is createElement')
        // },
        beforeCreate: function () {
            console.group('beforeCreate 建立前狀態===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message)
        },
        created: function () {
            console.group('created 建立完畢狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 掛載前狀態===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 掛載結束狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 銷燬前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 銷燬完成狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

參考上面的運行結果，咱們能夠發現

在beforeCreate中，el與data並未初始化。在created中完成了data的初始化，而el並無。在beforeMount中，完成了el與data的初始化，可是el仍是{{message}}，應用的虛擬Dom技術，先把這個地方給空住，到後面mounted掛載的時候，再把值渲染進去。而在mounted的時候，el與data已經完成加載。

當改變app.message的值時，將會觸發update的操做。

當對vue實例執行，app.$destroy（）時:

再更新message時：

vue再也不對動做進行響應了，可是原先而生成的dom元素還存在，能夠理解爲執行了destroy操做後，後續就再也不受到vue的控制了。

關於mounted與beforeMount的區別：

判斷vue實例中，是否有el選項，有的話選擇繼續。若是沒有el的話，中止編譯直到在該vue實例上調用vm.$mounted(el),以後再繼續。以後，判斷vue實例中是否有template參數選項，有的話則將其做爲模板編譯成render函數；若沒有template，就將外部HTML做爲模板編譯。

具體的話，咱們來看代碼：

var app = new Vue({
        el: '#app',
        data: {
            message : "LJY learns more"
        },
        template:"<h1>{{message +'這是在template模板中的'}}</h1>",
        // render: function(createElement) {
        //     return createElement('h1', 'this is createElement')
        // },

首先，會先去判斷是否有el選項，若是有即繼續，若是沒有的話就中止生命週期。隨後判斷是否有template選項，如如有的話，就執行。若是沒有template這一選項的話，就會執行outer HTML的。但若是把render函數的註釋解除掉的話，就會執行render函數。

所以，咱們能夠看到按優先級來講 render function>template>outerHTML

在beforeMount的時候，$el還只是咱們在HTML裏面寫的節點，而後到mounted的時候，它就把渲染出來的內容掛載到了DOM節點上。這中間的過程實際上是執render function的內容；當執行完render function以後，就會調用mounted掛載完畢後，這個實例就算是走完流程。

後續的鉤子函數執行的過程都是須要外部的觸發纔會執行，好比說有數據的變化，會調用beforeUpdate，而後通過Virtual DOM，最後upadated更新完畢。

beforeCreate：在實例初始化以後，data observer和event/watcher事件配置以前被調用，此時data、watcher、methods都沒有。這時，vue實例仍是什麼都沒有，可是$route對象是存在的，能夠根據路由信息進行重定向之類的操做。

created：在實例已經建立完成以後被調用，在這一步，實例已經完成了data observer，屬性與方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。此時，this.$data能夠訪問，watcher、events、methods也出現了，若根據後臺接口動態改變data與methods的話，是可行的。

beforeMount：在掛載開始以前被調用，相關的render函數首次被調用。可是render正在執行中，此時DOM仍是沒法操做的。頁面渲染時，所須要的數據應該儘可能在此次以前完成賦值。

mounted：在掛載以後被調用，在這一步建立vm.$el並替換el，並掛載在實例上。此時元素已經渲染完成了，依賴於DOM的代碼就放在此處，好比監聽DOM事件。

beforeUpdate：$vm.data更新以後，虛擬DOM從新渲染與打補丁以前被調用，能夠在這個鉤子中進一步地修改$vm.data，這不會觸發附加的重渲染過程。

updated：虛擬DOM從新渲染和打補丁以後被調用。當這個鉤子被調用時，組件DOM的data已經更新，因此能夠執行依賴於DOM的操做。可是不要在此時修改data，不然會繼續觸發beforeUpdate、updated這兩個生命週期，進入死循環。

beforeDestroy：實例被銷燬以前調用，在這一步，實例依然徹底可用，實例要被銷燬了。

destroyed：Vue實例銷燬後調用，此時，Vue實例指示的全部東西已經解綁，全部的事件監聽器都已被移除，全部的子實例也已經被銷燬，此時只能加一些toast之類的東西。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。