vue生命週期（vue頁面生命週期的運行邏輯）

時間 2019-12-10

標籤 vue 生命週期頁面運行邏輯简体版

原文原文鏈接

一、生命週期圖示

參考官網頁面：Vue生命週期圖示javascript

二、Vue 的生命週期包括四個狀態（記住這四個）

一、creating 狀態 ----vue 實例el被建立的過程
二、mounting 狀態 ----掛到到真實的 DOM 節點，渲染出html頁面
三、updating 狀態 ----若是 data 中的數據改變就會觸發對應組件的從新渲染
四、destroying 狀態 ----實例銷燬html

三、四個狀態對應 8 個方法

beforeCreate ----el 和 data 並未初始化，el、data、message都仍是 undefined
created ----實例建立成功，完成了 data 數據的初始化，el是undefined，data和message已經定義vue

beforeMount ----完成了 el 和 data 初始化，date數據還未掛載到html，仍是{{ message }}
mounted ----模版中的 data 數據直接顯示出來了，完成掛載java

beforeUpdate ----當 data 數據發生變化調用，發生在虛擬 DOM 從新渲染和打補丁以前
updated ----數據更改致使的虛擬 DOM 從新渲染和打補丁app

beforeDestroy ----在 vue 實例銷燬以前調用，此時實例仍然可用
destroyed ----在 vue 實例銷燬以後調用，vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬ide

四、代碼解讀

一、直接運行下面代碼；
二、F12查看Console;
三、輸入：app.message= 'this is update！！！！';
四、輸入：app.$destroy() //實例銷燬ui

<!DOCTYPE html>
<html>
<head>
    <title>vue生命週期</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  world" 
      },
       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>

相關標籤/搜索

每日一句

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