Vue 2.0 淺談--生命週期和鉤子函數

時間 2019-11-06

標籤 vue 2.0 淺談生命週期鉤子函數简体版

原文原文鏈接

前言

用Vue也有一段時間了,發現生命週期是很重要的一部分,稍微懂得了一些東西,特意來分享一下.

生命週期和鉤子函數-介紹

啥也不說先上圖
圖-1爲 Vue 1.0 生命週期圖,圖-2爲 Vue 2.0 生命週期圖,圖-3爲Vue 1.0 和 Vue 2.0 鉤子函數比較
重點看 Vue 2.0javascript

生命週期和鉤子函數-具體

上代碼html

本身粘走執行

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "Hello 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>
</body>
</html>

打開F12能夠查看生命週期各個時期的鉤子函數的狀態,以下圖vue

由上圖知:java

1.beforeCrete: 此時,$el和data都爲undefined,沒有初始化
2.created: 建立後data初始化了,而$el沒有
3.brforeMount: 掛在以前,$el和data都初始化了
4.mounted: Vue實例掛載完成了

注意: beforeMount紅色矩形框裏是{{message}},mounted的紅矩形框裏是xuxiao is boy,說明掛載前$el的值爲'虛擬'的元素節點,掛載後'虛擬'的Dom節點被真實的Dom節點替換

數據更新(update)

在控制檯裏輸入app.message = '數據更新'後

以下圖
segmentfault

因而可知,當data數據變化時只會觸發update

Vue實例解耦(destroy)

在控制檯裏輸入app.$destroy();
以下圖

由圖知:後端

執行完destroy操做後,data裏的數據沒有變化,可是Dom結構還存在,也就是Vue實例再也不受控制了,完成了解耦

生命週期和鉤子函數-總結

以下圖
這是把官方 Vue 2.0 生命週期的圖例簡化後的app

生命週期鉤子函數使用

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