2. 程式人生 > >vue2.0生命週期—碼蟲

vue2.0生命週期—碼蟲

阿新 • • 發佈：2019-02-20

1.下面是我對生命週期的一些理解 首先我們先看一下Vue生命週期圖。

這裡寫圖片描述

2.它可以分為八個階段

鉤子函式 函式描述
beforeCreate 元件例項剛被建立，元件屬性計算之前，如data屬性等。
created 元件例項建立完成，屬性已繫結，但DOM還未生成，$el屬性還不存在。
beforeMount 模板編譯 | 掛載之前。
mounted 模板編譯 | 掛載之後。
beforeUpdate 元件更新之前。
updated 元件更新之後。
beforeDestroy 元件銷燬前呼叫。
destroyed 元件銷燬後呼叫。

3.結合程式碼讓我們更好的去理解鉤子函式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <script type="text/javascript" src="js/vue.min.js" ></script>
    </head>
<body>
  <div id="app">
    <p>{{message}}</p>
  </div
 
>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
     //beforeCreate執行時：data和el均未初始化，值為undefined
    beforeCreate: function() {
      console.group('------beforeCreate建立前狀態-------------');
      console.log(this.$el); 
      console.log(this
 
.$data); 
      console.log(this.message) 
    },
    //.created執行時：Vue 例項觀察的資料物件data已經配置好，
    //已經可以得到app.message的值，但Vue 例項使用的根 DOM 元素el還未初始化
    created: function() {
      console.group('------created建立完畢狀態-------------');
      console.log(this.$el); 
      console.log(this.$data);
      console.log(this.message); 
    },
    //beforeMount執行時：data和el均已經初始化，但從{{message}}等現象可以看出
    //此時el並沒有渲染進資料，el的值為“虛擬”的元素節點
    beforeMount: function() {
      console.group('------beforeMount掛載前狀態-------------');
      console.log(this.$el);
      console.log(this.$data); 
      console.log(this.message);  
    },
    //mounted執行時：此時el已經渲染完成並掛載到例項上
    mounted: function() {
      console.group('------mounted 掛載結束狀態-------------');
      console.log(this.$el);    
      console.log(this.$data); 
      console.log(this.message); 
    },
    //修改vue例項的data時，vue就會自動幫我們更新渲染檢視，
    //在這個過程中，vue提供了beforeUpdate的鉤子給我們，
    //在檢測到我們要修改資料的時候，更新渲染檢視之前就會觸發鉤子beforeUpdate。
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前狀態-------------');
      console.log(this.$el);  
      console.log(this.$data); 
      console.log(this.message); 
      //測試DOM
      console.log('Dom結構是：' + document.getElementById('app').innerHTML);
    },
     //由於資料更改導致虛擬DOM重新渲染和打補丁，在這之後會呼叫該鉤子。
     //當這個鉤子被呼叫時，元件DOM已經更新，所以你現在可以執行依賴於DOM的操作。
     //然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。

    updated: function () {
      console.group('updated 更新完成狀態-------------');
      console.log(this.$el);
      console.log(this.$data); 
      console.log(this.message); 
       //測試DOM
      console.log('Dom結構是：' + document.getElementById('app').innerHTML);
    },
     //例項銷燬之前呼叫。在這一步，例項仍然完全可用
    beforeDestroy: function () {
      console.group('beforeDestroy 銷燬前狀態-------------');
      console.log(this.$el);    
      console.log(this.$data); 
      console.log(this.message); 
    },
     //Vue例項銷燬後呼叫。呼叫後，Vue例項指示的所有東西都會解繫結，
     //所有的事件監聽器會被移除，所有的子例項也會被銷燬。
    destroyed: function () {
      console.group('destroyed 銷燬完成狀態-------------');
      console.log(this.$el);  
      console.log(this.$data); 
      console.log(this.message)
    }
  })

</script>
</html>

讓我們一步一步詳細解說八大鉤子的作用。

(1)beforeCreate【建立前】：


這裡寫圖片描述

beforeCreate: 這個時候我們發現data和el均未初始化，值為undefined。

(2)created【建立後】：

這裡寫圖片描述
這裡寫圖片描述

created: 完成了 data 資料的初始化，但掛載階段尚未開始，所以$el 屬性不可見。

(3)beforeMount【載入前】

這裡寫圖片描述
這裡寫圖片描述

beforeMount:在掛載開始之前被呼叫，相關的render函式首次被呼叫，在這個時候還不能訪問DOM節點，此時我們的$el為虛擬的dom節點，在節點中的資料依然是{{data}}的形式，data裡面的資料和模板生成html。此時還沒有掛載html到頁面上。

(4)mounted【載入後】：

這裡寫圖片描述
這裡寫圖片描述

mounted:此時el被新建立的vm.$el替換，並掛載到例項上去之後呼叫該函式，在這個時候可以訪問DOM節點了，節點中的資料渲染完成，也就是說已經掛載到html頁面了。

(5)beforeUpdate【更新前】和updated【更新後】：

這裡寫圖片描述
這裡寫圖片描述

讓我們來看下更新前和更新後的區別如上圖:
我們可以很清楚的發現當我們去改變message的值的時候，觸發了beforeUpdate函式，這個時候$el的值已經更改了，但是dom並沒有變動。到update的時候，才真正去更新dom結構。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。該鉤子在伺服器端渲染期間不被呼叫。

(6)beforeDestroy【銷燬前】和destroyed【銷燬後】：

這裡寫圖片描述
這裡寫圖片描述

可以發現beforeDestory和destoryed打印出來的結果並沒有什麼特別，el的值data的資料依然在的。這是因為$destroy只是銷燬一個例項，清理它與其它例項的連線，解綁它的全部指令及事件監聽器，並不會清除data的資料或者清除dom。
具體可參考：https://cn.vuejs.org/v2/api/#vm-destroy

這就是vue生命週期，希望大家多多支援我
這裡寫圖片描述


作者：三木

相關推薦

vue2.0生命週期—碼蟲

1.下面是我對生命週期的一些理解 首先我們先看一下Vue生命週期圖。 2.它可以分為八個階段 鉤子函式 函式描述 beforeCreate 元件例項剛被建立，元件屬性計算之前，如data屬性等。 created 元件例項建立完成，屬

淺談vue2.0生命週期

beforeCreate ：元件例項剛被建立，元件屬性計算之前，如data屬性等 <template> <div class="router-page-wrap" style="background: #fc595d;"> this is user

Vue2.0生命週期（元件鉤子函式與路由守衛）

元件相關鉤子函式： beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destoryed 還有兩個特殊的（使用keep-alive）：activated、deactivate

Vue2.0生命週期和鉤子函式

var vm = new Vue({ el: "#container", data: { test : 'hello world' }, beforeCreate: function(){ console.log(this);

Vue2.0生命週期和鉤子函式的一些理解

前言： 鉤子就好像是把人的出生到死亡分成一個個階段，你肯定是在出生階段起名字，而不會在成年或者死亡的階段去起名字。或者說你想在出生階段去約炮，也是不行的。元件也是一樣，每個階段它的內部構造是不一樣的。所以一般特定的鉤子做特定的事，比如ajax獲取資料就可以在mounted階段。 一、vue生命週期簡介

vue2.0生命週期

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/vue2.min.

vue2.0生命周期函數

函數 pan 進行 scrip 後端 body ++ utf-8 () <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Vue2.x生命週期

<script type="text/ecmascript-6"> export default { name: 'Header', props:{ Title:{ type:String } }

vue 1.0生命週期

vue 1.0生命週期 鉤子函式 created beforeCompile Compiled ready beforeDestory destroyed created 在建立之前，首先初始化vue例項，監測dat

Servlet3.0生命週期,使用註解自動載入

Servlet生命週期: 0--呼叫構造方法      構造方法獲得一個Servlet例項1--呼叫初始化方法init();     整個生命週期中，init（)方法只被呼叫一次2--呼叫service決定使用doGet()還是doPost() 3--呼叫銷燬destroy

Vue2.0 探索之路——生命週期和鉤子函式的一些理解

前言 在使用vue一個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麼和後端做資料互動，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命週期不甚瞭解。只知道簡單的使用，而不知道為什麼，這對後面的踩坑是相當不利的。 因為我們有時候會在幾個鉤子函式裡做一些

vue2.0專案實戰（4）生命週期和鉤子函式詳解

最近的專案都使用vue2.0來開發，不得不說，vue真的非常好用，大大減少了專案的開發週期。在踩坑的過程中，因為對vue的生命週期不是特別瞭解，所以有時候會在幾個鉤子函式裡做一些事情，什麼時候做，在哪個函式裡做，我們不清楚。 下面來總結一下vue的生命週期。 vue生命週期簡介 咱們從上圖可以很明顯的看出

Vue2.0學習——生命週期、鉤子函式

Vue的生命週期就像人的一生，從出生、兒童、青年、中年、老年到死亡，經歷不同過程，Vue的元件也會經歷從建立到更新或銷燬的過程，而鉤子函式，就是把不同的任務掛到不同的階段，如ajax獲取資料就可以在mounted階段。下面結合網上一些學習到的東西綜合自己的見解簡述一下這部分內

vue2.0 代碼功能片段

vue lag taf 數組 select 括號 light oar brush 1、代碼片段截取 checkAll: function(flag){ this.checkAllFlag = flag; this.productLi

Vue2.0 探索之路——生命周期和鉤子函數的一些理解（轉）

head chrom 路由 技術分享 defined 修改 疑問 reat 有時 前言 在使用vue一個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麽和後端做數據交互，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命周期不甚了解。只知道簡單的使用，而不

Vue2.0 探索之路——生命周期和鉤子函數的一些理解

ram F12 一些事 key 版本 net 就是 pre 簡單 前言 在使用vue一個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麽和後端做數據交互，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命周期不甚了解。只知道簡單的使用，而不知道為什麽，這對

React從0到1--元件生命週期

1、React 嚴格定義了元件的生命週期，生命週期可能會經歷如下三個過程裝載過程（ Mount），也就是把元件第一次在 DOM 樹中渲染的過程；更新過程（ Update ），當元件被重新渲染的過程；解除安裝過程（ Unmount），元件從 DOM 中刪除的過程 。 2、裝載過程 我們先來看裝載過程，當元件

IIS 7.0 的 ASP.NET 應用程式生命週期概述

    文章：IIS 7.0 的 ASP.NET 應用程式生命週期概述 地址：https://msdn.microsoft.com/zh-cn/library/bb470252(v=vs.100).aspx 本主題介紹在 IIS 7.0 整合模式下執行以及與 IIS 7.0 或更高

Vue2 生命週期 lifecycle

<!DOCTYPE html> <html> <head> <title>Welcome to Vue</title> <script src="https://unpkg.com/vue"></script>

Vue2.5筆記：Vue的例項與生命週期

理解與認識 Vue 的例項是我們學習 Vue 非常重要的一步，也是非常必須的，因為例項是它的一個起點，也是它的一個入口，只有我們建立一個 Vue 例項之後，我們才行利用它進行一些列的操作。 首先 Vue 沒有完全遵守 MVVM 的架構模式，但是它的設計也受到了該模式的啟發，Vue 也就是在該模式中起到 VM（