Vue父子組件生命周期執行順序

本文轉載自查看原文 2020-06-10 10:38 3932

1、vue的生命周期

2、實際操作

下面我們在實際的代碼執行過程中理解父子組件生命周期創建過程以及鈎子函數執行的實時狀態變化。

測試基於下面的代碼，引入vue.js文件后即可執行。（打開頁面后，再按一次刷新會自動進入debugger狀態）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8     <style>
  9         
 10     </style>
 11 </head>   
 12 <body>
 13 <div id="app">
 14     <p>{{message}}</p>
 15     <keep-alive>
 16         <my-components :msg="msg1" v-if="show"></my-components>
 17     </keep-alive>
 18 </div>
 19 </body>
 20 <script src="../../node_modules/vue/dist/vue.js"></script>
 21 <script>
 22     var child = {
 23         template: '<div>from child: {{childMsg}}</div>',
 24         props: ['msg'],
 25         data: function() {
 26             return {
 27                 childMsg: 'child'
 28             }   
 29         },
 30         beforeCreate: function () {
 31             debugger;
 32         },
 33         created: function () {
 34             debugger;
 35         },
 36         beforeMount: function () {
 37             debugger;
 38         },
 39         mounted: function () {
 40             debugger;
 41         },
 42         deactivated: function(){
 43             alert("keepAlive停用");
 44         },
 45         activated: function () {
 46             console.log('component activated');
 47         },
 48         beforeDestroy: function () {
 49             console.group('beforeDestroy 銷毀前狀態===============》');
 50             var state = {
 51                 'el': this.$el,
 52                 'data': this.$data,
 53                 'message': this.message
 54             }
 55             console.log(this.$el);
 56             console.log(state);
 57         },
 58         destroyed: function () {
 59             console.group('destroyed 銷毀完成狀態===============》');
 60             var state = {
 61                 'el': this.$el,
 62                 'data': this.$data,
 63                 'message': this.message
 64             }
 65             console.log(this.$el);
 66             console.log(state);
 67         },
 68     };
 69     var vm = new Vue({
 70         el: '#app',
 71         data: {
 72                 message: 'father',
 73                 msg1: "hello",
 74                 show: true
 75             },
 76         beforeCreate: function () {
 77             debugger;
 78         },
 79         created: function () {
 80             debugger;
 81         },
 82         beforeMount: function () {
 83             debugger;
 84         },
 85         mounted: function () {
 86             debugger;    
 87         },
 88         beforeUpdate: function () {
 89             alert("頁面視圖更新前");
 90             
 91         },
 92         updated: function () {
 93             alert("頁面視圖更新后");
 94         },
 95         beforeDestroy: function () {
 96             console.group('beforeDestroy 銷毀前狀態===============》');
 97             var state = {
 98                 'el': this.$el,
 99                 'data': this.$data,
100                 'message': this.message
101             }
102             console.log(this.$el);
103             console.log(state);
104         },
105         destroyed: function () {
106             console.group('destroyed 銷毀完成狀態===============》');
107             var state = {
108                 'el': this.$el,
109                 'data': this.$data,
110                 'message': this.message
111             }
112             console.log(this.$el);
113             console.log(state);
114         },
115         components: {
116             'my-components': child
117         }
118     });
119 </script>
120 </html>

3.1、生命周期調試

首先我們創建了一個Vue實例vm，將其掛載到頁面中id為“app”的元素上。

3.1.1、根組件的beforeCreate階段

可以看出，在調用beforeCreate()函數時，只進行了一些必要的初始化操作（例如一些全局的配置和根實例的一些屬性初始化），此時data屬性為undefined，沒有可供操作的數據。

3.1.2、根組件的Created階段

調用Created()函數，在這一步，實例已完成以下的配置：數據代理和動態數據綁定(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

3.1.3、根組件的beforeMount階段

在調用boforeMount()函數前首先會判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味着停止了生命周期，直到在該vue實例上調用vm.$mount(el)

在這個例子中，我們有el元素，因此會調用boforeMount()函數,此時已經開始執行模板解析函數，但還沒有將$el元素掛載頁面，頁面視圖因此也未更新。在標紅處，還是 {{message}}，這里就是應用的 Virtual DOM（虛擬Dom）技術，先把坑占住了。到后面mounted掛載的時候再把值渲染進去。

3.1.4、子組件的beforeCreate、Created、beforeMount、Mounted階段

在父組件執行beforeMount階段后，進入子組件的beforeCreate、Created、beforeMount階段，這些階段和父組件類似，按下不表。beforeMount階段后，執行的是Mounted階段，該階段時子組件已經掛載到父組件上，並且父組件隨之掛載到頁面中。

由下圖可以知道，在beforeMount階段之后、Mounted階段之前，數據已經被加載到視圖上了，即$el元素被掛載到頁面時觸發了視圖的更新。

3.1.5、子組件的activated階段

我們發現在子父組件全部掛載到頁面之后被觸發。這是因為子組件my-components被<keep-alive> 包裹，隨$el的掛載被觸發。如果子組件沒有被<keep-alive>包裹，那么該階段將不會被觸發。

3.1.6、父組件的mounted階段

mounted執行時：此時el已經渲染完成並掛載到實例上。

至此，從Vue實例的初始化到將新的模板掛載到頁面上的階段已經完成，退出debugger。下面我們來看一下deactivated、beforeUpdate、updated、beforeDestroy、destroyed鈎子函數。

3.2、deactivated、beforeUpdate、updated階段

由生命周期函數可知：當數據變化后、虛擬DOM渲染重新渲染頁面前會觸發beforeUpdate()函數，此時視圖還未改變。當虛擬DOM渲染頁面視圖更新后會觸發updated()函數。

我們不妨改變vm.show = false，當修改這個屬性時，不僅會觸發beforeUpdate、updated函數，還會觸發deactivated函數（因為keep-alive 組件停用時調用）。我們不妨想一下deactivated函數會在beforeUpdate后還是updated后調用。

我們在控制台輸入vm.show = false。得到三者的調用順序分別為beforeUpdate、deactivated、updated。我們可以知道的是deactivated函數的觸發時間是在視圖更新時觸發。因為當視圖更新時才能知道keep-alive組件被停用了。

3.3、beforeDestroy和destroyed鈎子函數間的生命周期

現在我們對Vue實例進行銷毀，調用app.$destroy()方法即可將其銷毀，控制台測試如下：

我們發現實例依然存在，但是此時變化已經發生在了其他地方。

beforeDestroy鈎子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。

destroyed鈎子函數在Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀（也就是說子組件也會觸發相應的函數）。這里的銷毀並不指代'抹去'，而是表示'解綁'。

銷毀時beforeDestory函數的傳遞順序為由父到子，destory的傳遞順序為由子到父。

4、一些應用鈎子函數的想法

在created鈎子中可以對data數據進行操作，這個時候可以進行ajax請求將返回的數據賦給data。
雖然updated函數會在數據變化時被觸發，但卻不能准確的判斷是那個屬性值被改變，所以在實際情況中用computed或match函數來監聽屬性的變化，並做一些其他的操作。
在mounted鈎子對掛載的dom進行操作，此時，DOM已經被渲染到頁面上。
在使用vue-router時有時需要使用<keep-alive></keep-alive>來緩存組件狀態，這個時候created鈎子就不會被重復調用了，如果我們的子組件需要在每次加載或切換狀態的時候進行某些操作，可以使用activated鈎子觸發。
所有的生命周期鈎子自動綁定 this 上下文到實例中，所以不能使用箭頭函數來定義一個生命周期方法 (例如 created: () => this.fetchTodos())。這是導致this指向父級。

5、小結

加載渲染過程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子組件更新過程

父beforeUpdate->子beforeUpdate->子updated->父updated

父組件更新過程

父beforeUpdate->父updated

銷毀過程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue父子組件生命周期執行順序 Vue生命周期，及父子組件生命周期順序 VUE生命周期中的鈎子函數及父子組件的執行順序深入理解Vue父子組件生命周期 vue中的父組件及子組件生命周期的執行順序 3-18 Vue 的父組件和子組件生命周期鈎子函數執行順序？ react教程 — 組件的生命周期和執行順序 Vue路由以及組件生命周期之間的順序 vue生命周期函數created與mounted執行順序 vue 父子component生命周期