2. 程式人生 > >vue之生命周期

vue之生命周期

阿新 • • 發佈：2017-09-25
進行 es2017 pre 瀏覽器 bsp 重新 分享 發現 for

技術分享技術分享

<!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 : "xuxiao 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掛載的時候再把值渲染進去。

destroy 相關

有關於銷毀，暫時還不是很清楚。我們在console裏執行下命令對 vue實例進行銷毀。銷毀完成後，我們再重新改變message的值，vue不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這麽理解，執行了destroy操作，後續就不再受vue控制了。

生命周期總結

這麽多鉤子函數，我們怎麽用呢，我想大家可能有這樣的疑問吧，我也有，哈哈哈。

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

vue之生命周期

相關推薦

vue之生命周期

進行 es2017 pre 瀏覽器 bsp 重新 分享 發現 for <!DOCTYPE html> <html> <head> <title></title> <script type=

vue之生命周期鉤子函數

函數 屬性 ash med rom 每次 進入 str out 1、vue router.beforeEach beforeEach的鉤子函數，它是一個全局的before 鉤子函數， （before each）意思是在 每次每一個路由改變的時候都得執行一遍。 它的三個參數：

Vue.js學習之生命周期

ted eight http 初始 機會 編譯 log console eat 每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如，實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，然後在數據變化時更新 DOM 。在這個過程中

Vue2 第四天學習(Vue的生命周期)

函數 gen 為什麽 urn pad 指向 ret htm 編譯 .array p { counter-increment: longen; margin-left: 10px } .array p::before { content: counter(longen) ".

vue的生命周期

doc led 銷毀 pil log bsp span pan 編譯 vue生命周期 鉤子函數： 1、created ----- 實例已經創建的時候執行，也就是new Vue成功了之後執行 2、beforeCompile -----

【07】react 之 生命周期

led render cti dup 一些事 復制代碼 pop 狀態機 document 閱讀目錄(Content) 實例化 getDefaultProps getInitialState componentWillMount render componentDidM

07、NetCore2.0插件框架之生命周期

系統 star 源碼 p s partial text strong cti exp 07、NetCore2.0插件框架之生命周期 NetCore2.0插件框架是如何管理插件的生命周期的？生命周期有哪幾類，又是在哪些場景下應用的呢？ 一、生命周期的分類 我們可以查看系統

vue.js生命周期鉤子函數及緩存

實例 log 完成 AC 由於 開始 數據 情況下 完成後 　　在使用vue.js進行開發時，使用最多的就是created、mounted、activated。 　　由於有些情況下，我們需要復用某些組件，因此需要用到keep-alive。 　　當引入keep-alive

Yii2基本概念之——生命周期(LifeCycle)

運行機制 cor 插入數據 改變 行為 用戶登錄 save 事件處理 xxx 人有生老病死，一年有春夏秋冬四季演替，封建王朝有興盛、停滯、衰亡的周期律——“其興也勃焉，其亡也忽焉”。換句話說，人，季節，王朝等等這些世間萬物都有自己的生命周期。同樣地，在軟件行業，一個系統，一

vue 524 (生命周期 計算屬性 監聽)

自己的 body ava pan span ext 成員變量 col create 每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子

Spring註解開發-全面解析常用註解使用方法之生命周期

統一 ota tco conf struct 賦值 組件註冊 功能 pri 本文github位置:https://github.com/WillVi/Spring-Annotation/ 往期文章：Spring註解開發-全面解析常用註解使用方法之組件註冊 bean生命周期

Vue的生命周期函數

eth () 調用 保持 兩個 實的 device 周期 實例 Vue的生命周期函數通常分為以下三類： ①實例創建時的生命周期函數；②實例執行時的生命周期的函數；③實例銷毀時的生命周期的函數。 代碼與註釋詳解： 1 <!DOCTYPE html> 2 &

vue 關於生命周期

如何 節點 鉤子 請求 調用 新標簽頁 logs pos 依賴 序言： 　　1. vue 單組件的生命周期； 　　2. vue 父子組件的生命周期； 　　3. axios 異步請求 與 vue 的組件周期； 一、vue 每個組件的生命周期 　　關於每個組件的生命周期，官

VUE：生命周期

image 之路 生命 new pat 調用 before ajax請求 初始化 VUE：生命周期 <!DOCTYPE html> <html> <head> <meta charset="UTF

vue 的生命周期

color child 理解 都是 image 簡單 生命周期 demo1 this vue的生命周期就是一個vue組件從出生到死亡的過程 *** 生命周期，你需要知道它是什麽時候觸發。 beforeCreate 　　在組件初始化之前 在這個生命周期中組件的

從零開始學 Web 之 Vue.js（三）Vue實例的生命周期

報錯 web 前端 cnblogs 前端 eth code vue 公眾 des 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

Vue基礎進階 之 Vue生命周期與鉤子函數

ext style 博客園 方法 itl methods 但是 不能 鉤子方法 Vue生命周期 Vue生命周期：Vue實例從創建到銷毀的過程，稱為Vue的生命周期； Vue生命周期示意圖：https://cn.vuejs.org/v2/guide/instan

前端筆記之Vue（三）生命周期&CSS預處理&全局組件&自定義指令

var solid rul 指令 observer 括號 rem this width 一、Vue的生命周期 生命周期就是指一個對象的生老病死的過程。 用Vue框架，熟悉它的生命周期可以讓開發更好的進行。 所有的生命周期鉤子自動綁定 this 上下文到實例中，因此你可以訪

12、Cocos2dx 3.0遊戲開發找小三之3.0中的生命周期分析

ide () mil and 地理 splay ioe ase ima 重開發人員的勞動成果。轉載的時候請務必註明出處：http://blog.csdn.net/haomengzhu/article/details/27706303 生命周期分析 在前面文章中我

聊一聊Vue實例與生命周期運行機制

思維 mod images mic import mvvm 方法 add char Vue的實例是Vue框架的入口，擔任MVVM中的ViewModel角色，所有功能的實現都是圍繞其生命周期進行的，在生命周期的不同階段調用對應的鉤子函數可以實現組件數據管理和DOM渲染兩大重要