詳解vue生命週期

時間 2019-11-05

標籤 css html vue 瀏覽器 app dom 函數學習 this 欄目 CSS 简体版

原文原文鏈接

首先，每一個Vue實例在被建立以前都要通過一系列的初始化過程,這個過程就是vue的生命週期。首先看一張圖吧~這是官方文檔上的圖片相信你們必定都會很熟悉：css

能夠看到在vue一整個的生命週期中會有不少鉤子函數提供給咱們在vue生命週期不一樣的時刻進行操做, 那麼先列出全部的鉤子函數，而後咱們再一一詳解:html

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

先來一波代碼，各位複製在瀏覽器中運行，打開console查看就好了：vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命週期學習</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命週期'
    },
    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>
</html>

運行後打開console能夠看到打印出來內容以下:瀏覽器

能夠看到一個vue實例在建立過程當中調用的幾個生命週期鉤子。app

1. 在beforeCreate和created鉤子函數之間的生命週期

在這個生命週期之間，進行初始化事件，進行數據的觀測，能夠看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變）。
注意看下：此時仍是沒有el選項dom

2. created鉤子函數和beforeMount間的生命週期

在這一階段發生的事情仍是比較多的。函數

首先會判斷對象是否有el選項。若是有的話就繼續向下編譯，若是沒有el選項，則中止編譯，也就意味着中止了生命週期，直到在該vue實例上調用vm.$mount(el)。此時註釋掉代碼中:學習

el: '#app',

而後運行能夠看到到created的時候就中止了：ui

若是咱們在後面繼續調用vm.$mount(el),能夠發現代碼繼續向下執行了this

vm.$mount(el) //這個el參數就是掛在的dom接點

而後，咱們往下看，template參數選項的有無對生命週期的影響。
（1）.若是vue實例對象中有template參數選項，則將其做爲模板編譯成render函數。
（2）.若是沒有template選項，則將外部HTML做爲模板編譯。
（3）.能夠看到template中的模板優先級要高於outer HTML的優先級。
修改代碼以下, 在HTML結構中增長了一串html，在vue對象中增長了template選項：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命週期學習</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--html中修改的-->
    <h1>{{message + '這是在outer HTML中的'}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template: "<h1>{{message +'這是在template中的'}}</h1>", //在vue配置項中修改的
    data: {
      message: 'Vue的生命週期'
    }
</script>
</html>

執行後的結果能夠看到在頁面中顯示的是：

那麼將vue對象中template的選項註釋掉後打印以下信息：

這下就能夠想一想什麼el的判斷要在template以前了~是由於vue須要經過el找到對應的outer template。

在vue對象中還有一個render函數，它是以createElement做爲參數，而後作渲染操做，並且咱們能夠直接嵌入JSX.

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('h1', 'this is createElement')
    }
})

能夠看到頁面中渲染的是：

因此綜合排名優先級：
render函數選項 > template選項 > outer HTML.

3. beforeMount和mounted 鉤子函數間的生命週期

能夠看到此時是給vue實例對象添加$el成員，而且替換掉掛在的DOM元素。由於在以前console中打印的結果能夠看到beforeMount以前el上仍是undefined。

4. mounted

注意看下面截圖：

在mounted以前h1中仍是經過{{message}}進行佔位的，由於此時還有掛在到頁面上，仍是JavaScript中的虛擬DOM形式存在的。在mounted以後能夠看到h1中的內容發生了變化。

5. beforeUpdate鉤子函數和updated鉤子函數間的生命週期

當vue發現data中的數據發生了改變，會觸發對應組件的從新渲染，前後調用beforeUpdate和updated鉤子函數。咱們在console中輸入：

vm.message = '觸發組件更新'

發現觸發了組件的更新：

6.beforeDestroy和destroyed鉤子函數間的生命週期

beforeDestroy鉤子函數在實例銷燬以前調用。在這一步，實例仍然徹底可用。
destroyed鉤子函數在Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

本文是我的對vue的生命週期的理解，有什麼不對的地方還請大牛多多指點~

相關標籤/搜索

每日一句

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