vue - 生命周期

阿新 • • 發佈：2018-09-09

group 激活 ads 開始 ole end 好的更新 undefined

圖例

技術分享圖片

官網vue生命周期鉤子.

生命周期　　　　　　說明

beforeCreate	在實例初始化之後，數據觀測和事件配置之前被調用
created	在實例創建完成後被立即調用，完成數據觀測，屬性和方法的運算，初始化事件，$el屬性未見
beforeMount	在掛載開始之前被調用：相關的 render 函數首次被調用，只在虛擬DOM生成HTML
mounted	在el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互
beforeUpdate	在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程
updated	在由於數據更改導致的虛擬DOM重新渲染和打補丁之後調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用
activated	keep-alive 組件激活時調用
deactivated	keep-alive 組件停用時調用
beforeDestroy	在實例銷毀之前調用。實例仍然完全可用
destroyed	在實例銷毀之後調用。調用後，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用

生命周期鉤子示例代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Vue入門之Helloworld</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" 
></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         {{message}}
11     </div>
12 
13 <script type="text/javascript">
14 var app=new Vue({
15     el:‘#app‘,
16     data:{
17         message:‘hello Vue!‘
18     },
19     beforeCreate: function () {
20         console.group(‘beforeCreate 創建前狀態===============》‘);
21         console.log("%c%s", "color:red" , "el      : " + this.$el); //undefined
22         console.log("%c%s", "color:red","data    : " + this.$data); //undefined 
23         console.log("%c%s", "color:red","message: " + this.message)  
24     },
25     created: function () {
26         console.group(‘created 創建完畢狀態===============》‘);
27         console.log("%c%s", "color:red","el      : " + this.$el); //undefined
28         console.log("%c%s", "color:red","data    : " + this.$data); //已被初始化 
29         console.log("%c%s", "color:red","message: " + this.message); //已被初始化
30     },
31     beforeMount: function () {
32         console.group(‘beforeMount 掛載前狀態===============》‘);
33         console.log("%c%s", "color:red","el      : " + (this.$el)); //已被初始化
34         console.log(this.$el);
35         console.log("%c%s", "color:red","data    : " + this.$data); //已被初始化  
36         console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
37     },
38     mounted: function () {
39         console.group(‘mounted 掛載結束狀態===============》‘);
40         console.log("%c%s", "color:red","el      : " + this.$el); //已被初始化
41         console.log(this.$el);     
42         console.log("%c%s", "color:red","data    : " + this.$data); //已被初始化
43         console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
44     },
45     beforeUpdate: function () {
46         console.group(‘beforeUpdate 更新前狀態===============》‘);
47         console.log("%c%s", "color:red","el      : " + this.$el);
48         console.log(this.$el);    
49         console.log("%c%s", "color:red","data    : " + this.$data); 
50         console.log("%c%s", "color:red","message: " + this.message); 
51     },
52     updated: function () {
53         console.group(‘updated 更新完成狀態===============》‘);
54         console.log("%c%s", "color:red","el      : " + this.$el);
55         console.log(this.$el); 
56         console.log("%c%s", "color:red","data    : " + this.$data); 
57         console.log("%c%s", "color:red","message: " + this.message); 
58     },
59     beforeDestroy: function () {
60         console.group(‘beforeDestroy 銷毀前狀態===============》‘);
61         console.log("%c%s", "color:red","el      : " + this.$el);
62         console.log(this.$el);     
63         console.log("%c%s", "color:red","data    : " + this.$data); 
64         console.log("%c%s", "color:red","message: " + this.message); 
65     },
66     destroyed: function () {
67         console.group(‘destroyed 銷毀完成狀態===============》‘);
68         console.log("%c%s", "color:red","el      : " + this.$el);
69         console.log(this.$el);  
70         console.log("%c%s", "color:red","data    : " + this.$data); 
71         console.log("%c%s", "color:red","message: " + this.message)
72     }
73 })
74 </script>
75 </body>
76 </html>

在chrome瀏覽器裏打開，F12看console查看，分三個階段解讀：

階段一：創建和掛載

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

階段二：更新
在chrome console執行以下命令：

app.message= ‘yes !! I do‘;

beforeUpdate：虛擬DOM中根據data變化去更新html
updated：將虛擬DOM更新完成的HTML更新到頁面中

階段三：銷毀
在chrome console執行以下命令：

app.$destroy();

beforeDestroy：銷毀之前調用
destroyed：銷毀之後調用，之後再執行app.message= ‘hello vue’，頁面不會同步更新。

具體圖解如下：
技術分享圖片

vue - 生命周期

Vuejs——Vue生命周期，數據，手動掛載，指令，過濾器

【Vue】詳解Vue生命周期

pda -a clas 文本 con 存在操作 ef6 註意 Vue實例的生命周期全過程（圖）（這裏的紅邊圓角矩形內的都是對應的Vue實例的鉤子函數）在beforeCreate和created鉤子函數間的生命周期在beforeC

vue生命周期的理解

log instance code 結構 images 輸入分享 upd 對象如下圖為Vue官網（https://cn.vuejs.org/v2/guide/instance.html#實例生命周期）給出的生命周期圖示光看圖或許不夠直觀，接下來就是一段代碼來加強理解

vue 生命周期

pil doc .cn 選項 meta remove 復制代碼改變 div 一 vue的生命周期如下圖所示(很清晰) 二 vue生命周期的栗子註意觸發vue的created事件以後,this便指向vue實例,這點很重要 <!DOCTYPE htm

vue生命周期

結果 data 註意實例 https 計算 cti 所有 tex Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。其實 Vue 實例從創建到銷毀的過程，就是生命周期

Vue生命周期總結

gif upd 掛載 create app efi pan ref div 查看生命周期圖 <!DOCTYPE html> <html> <head> <title></title>

Vue生命周期及業務場景使用

create ext ans 圖片 gem tro observe 相關重新 vue裏的生命周期是什麽？ vue實例從創建到銷毀的過程稱之為vue的生命周期 vue的生命周期各階段都做了什麽？ beforeCreate 實例創建前：這個階段實例的data、methods

vue 生命周期鉤子的理解 watch computed

wan post before chan www. 順序 tps 結果 data ### 理解vue的生命周期，首先需要註意幾個關鍵字 1. el :選擇器 2. $el：對應選擇器的template模板（html代碼） 3. render：也是vue實例中的一項，其參數更

摘抄詳細的VUE生命周期

LV 上下 blog 開始 vue col des live spa p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 { margin: 0

Vue生命周期鉤子函數

Vue<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="

VUE生命周期鉤子

mil family des tro vue生命周期實例 mount AR red var app=new Vue({ el:‘#app‘, data:{ a:2 }, beforeCreate:function(){

vue生命周期筆記

ons IT ini 參考 for fault 都沒有作用 UNC 1、創建VUE實例，new Vue() 2、在創建實例的過程中，調用鉤子beforeCreate()，在執行這個函數時，DOM還沒有掛載，屬性行為都沒有綁定　之後，init injecions an

vue - 生命周期第二次學習與理解

template 另一個 amp update left 過程取數沒有學習對於剛接觸vue一兩個月、才僅僅獨立做過一兩個vue項目的小白來說，以前一直自我感覺自己知道vue的生命周期，直到前兩天去面試，面試官讓我說一下vue的生命周期。。。其實我的心中是有那張圖

Vue生命周期學習

ces 打補丁 event 我們角色建立註冊 recompile before 轉自https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html Vue實例雖然沒有完全遵循MVVM模型，但Vue的設計無疑

Vue生命周期，計算屬性、方法、偵聽器

綁定 troy for dom 獲取數據初始 created 請求一次 vue實例和組件都有生命周期函數，beforeCreate()實例或組件沒有被創建的時候執行的鉤子函數；created()是實例或組件被創建完成的時候執行的鉤子函數；beforeMount()函數

vue - 生命周期

group 激活 ads 開始 ole end 好的更新 undefined 圖例官網vue生命周期鉤子. 生命周期　　　　　　說明 beforeCreate 在實例初始化之後，數據觀測和事件配置之前被調用 creat

vue生命周期和react生命周期對比

解決 gin 改變 bubuko detached ash add png ready 一 vue的生命周期如下圖所示(很清晰)初始化、編譯、更新、銷毀二 vue生命周期的栗子註意觸發vue的created事件以後,this便指向vue實例,這點很重要

Vue生命周期函數詳解

api 新的 for 分類特點 methods rec .org 實例 vue實例的生命周期 1 什麽是生命周期（每個實例的一輩子）概念：每一個Vue實例創建、運行、銷毀的過程，就是生命周期；在實例的生命周期中，總是伴隨著各種事件，這些事件就是生命周期函數；生命周期

Vue生命周期/鉤子函數的理解

理解回調 troy ext pla title .net opened () 對於實現頁面邏輯交互等效果，我們必須弄懂vue的生命周期，知道我們寫的東西應該掛載到哪裏。vue官方api給了簡單的邏輯，如下: 　　所有的生命周期鉤子自動綁定this上，因此你可以訪問數據

Vue 生命周期LIFECYCLE是8個嗎？

ted soft err port mic code ant ons href vue生命周期鉤子個數是：11個。 export const LIFECYCLE_HOOKS = [ ‘beforeCreate‘, ‘created‘, ‘before

vue - 生命周期

相關推薦