每個 vue 例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到 dom、在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的** 原文下邊是乙個官網的圖例，描述了各個生命週期函式的執行次序
所有的生命週期鉤子自動繫結 this 上下文到例項中，因此可以通過其訪問資料、運算等，下邊會按照生命週期函式執行順序來講解1. beforecreate例項初始化後，建立完成之前被呼叫2. created例項建立完成後被立即呼叫，這個時候還沒有開始掛載 不能訪問 $el3. beforemount掛載開始之前呼叫，即將開始掛載4. mounted對比：對應 react
componentwillmount在完成首次渲染之前呼叫 此時仍可以修改元件的狀態例項掛載之後呼叫，但是並不是所有子元件也都一起掛載完成，如果需要整個檢視渲染完畢 可以使用5. beforeupdatethis.$nexttick(function () {})對比：對應 reactcomponentdidmount完成首次渲染之後呼叫， 可以在這裡操作dom資料更新完成前呼叫，發生在虛擬dom重新渲染和打補丁前，在這裡進一步的更改狀態，不會觸發重新渲染6. updated對比：對應 react
componentwillupdate接受狀態的改變，進行渲染之前呼叫，不同的是 vue 中允許在這一步更改狀態；而 react 則禁止，如果要更改狀態要在 react 的componentwillreceiveprops宣告週期中進行更改資料重新渲染虛擬dom後呼叫，在這裡，元件dom已經更新，可以執行依賴dom的操作，但是應該避免在這裡更改狀態，與 mounted 一樣，不能保證所有子元件都掛載完成，可以使用 this.nexttick(function () {})` 進行全部渲染完的操作7. beforedestroy對比：對應 react
componentdidupdate完成渲染新的props或者state後呼叫，此時可以訪問到新的dom元素例項銷毀之前呼叫，在這一步，例項仍然可用8. destroyed對比：對應 react
componentwillunmount元件銷毀之前呼叫，做一些清理工作例項銷毀之後呼叫9. 其他對比：react 中沒有這個生命週期鉤子
react 中有componentwillreceiveprops這個鉤子，用來元件接受更新時呼叫，可以再次更新 props 或者 state, 在 vue 中雖然沒有這個宣告週期鉤子，但是 vue 例項提供乙個 watch 屬性，可以用來監視狀態改變，與componentwillreceiveprops功能類似react 中有
shouldcomponentupdate這個鉤子，用來判斷決定元件是否需要更新，以減少重新渲染，提公升效能；在 vue 中元件是否需要更新，由 vue 框架主動判斷，不在需要開發者在這個函式中操作了export default ;},methods: ,
change() ,
destroyall()
},watch:
},beforecreate() ,
created() ,
beforemount() ,
mounted() );
console.log('5. mounted');
},beforeupdate()
},updated() );
console.log('8. updated');
},beforedestroy() ,
destroyed()
};/*
1. beforecreate
2. created
3. beforemount
5. mounted // this.$nexttick(fn) 會在 所有子元件掛在後執行
4. mounted nexttick
// 手動觸發狀態更改
text change
6. beforeupdate // 在 beforeupdate 中可以更改狀態，不會觸發重複渲染
text change
6. beforeupdate // 如下可以看到 只是重新走了一遍 update 不會無限迴圈下去
8. updated（2）
7. updated nexttick（2）
*/
Vue2 生命週期 lifecycle
出處 我的github部落格 doctype html html head title welcome to vue title script src script head body div id div script var newvue beforecreate created beforem...
vue05 生命週期
首先看下面 宣告週期就是vue例項在某乙個時間點會自動執行的函式，這些函式沒有放在methods裡面，直接在vue例項下。beforecreate vue例項初始化後執行 created 外部注入，雙向繫結等完成後執行 beforemount 頁面還沒有被渲染 mounted 頁面渲染完 befor...
Vue隨筆（二）生命週期
beforecreate 建立前 created 建立後 beforemount 載入前 mounted 載入後 beforeupdate 更新前 updated 更新後 beforedestroy 銷毀前 destroyed 銷毀後 下面我們就來分別看看vue生命週期的這八個階段 1 建立前 be...