初學Vue——生命週期和鉤子函數的一些理解

時間 2019-12-04

標籤初學 vue 生命週期鉤子函數一些理解简体版

原文原文鏈接

vue生命週期簡介

我們從上圖能夠很明顯的看出如今vue2.0都包括了哪些生命週期的函數了。

實例生命週期

每一個 Vue 實例在被建立以前都要通過一系列的初始化過程。例如，實例須要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，而後在數據變化時更新 DOM 。在這個過程當中，實例也會調用一些生命週期鉤子，這就給咱們提供了執行自定義邏輯的機會。

【案例】

<!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 type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script type="text/javascript">
        //app.$destroy();銷燬
      var app = new Vue({
          el: '#app',
          data: {
              message : "wujian is boy" 
          },
           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>

create 和 mounted 相關

我們在chrome瀏覽器裏打開，F12看console就能發現

beforecreated：el 和 data 並未初始化 
created:完成了 data 數據的初始化，el沒有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成掛載

另外在標紅處，咱們能發現el仍是 {{message}}，這裏就是應用的 Virtual DOM（虛擬Dom）技術，先把坑佔住了。到後面mounted掛載的時候再把值渲染進去。

update 相關

這裏咱們在 chrome console裏執行如下命令以下圖

下面就能看到data裏的值被修改後，將會觸發update的操做。

destroy 相關

咱們在console裏執行下命令對 vue實例進行銷燬。銷燬完成後，咱們再從新改變message的值，vue再也不對此動做進行響應了。可是原先生成的dom元素還存在，能夠這麼理解，執行了destroy操做，後續就再也不受vue控制了。

生命週期總結

這麼多鉤子函數，咱們怎麼用呢，我想你們可能有這樣的疑問吧。

beforecreate : 舉個栗子：能夠在這加個loading事件 
created ：在這結束loading，還作一些初始化，實現函數自執行 
mounted ： 在這發起後端請求，拿回數據，配合路由鉤子作一些事情
beforeDestory： 你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容