vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期圖示中英文版Vue實(shí)例生命周期鉤子
知乎上近日有人發(fā)起了一個(gè) “react 是不是比 vue 牛皮，為什么？” 的問題，Vue.js 作者尤雨溪12月4日正面回應(yīng)了該問題。以下是尤雨溪回復(fù)的一部分：
作為一個(gè)個(gè)人項(xiàng)目的 Vue 沒有這樣的宣傳資源，也并不是為了改變用戶。所以從設(shè)計(jì)的角度上來說，Vue 首先考慮的是假設(shè)用戶只掌握了 web 基礎(chǔ)知識(shí) (HTML, CSS, JS) 的情況下，如何能夠最快理解和上手，實(shí)現(xiàn)一個(gè)看得見摸得著的應(yīng)用。
--------------
每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。
比如 created 鉤子可以用來在一個(gè)實(shí)例被創(chuàng)建之后執(zhí)行代碼：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實(shí)例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的鉤子，在實(shí)例生命周期的不同階段被調(diào)用，如 mounted、updated 和 destroyed。生命周期鉤子的 this 上下文指向調(diào)用它的 Vue 實(shí)例。
不要在選項(xiàng)屬性或回調(diào)上使用箭頭函數(shù)，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因?yàn)榧^函數(shù)是和父級(jí)上下文綁定在一起的，this 不會(huì)是如你所預(yù)期的 Vue 實(shí)例，經(jīng)常導(dǎo)致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯(cuò)誤。
生命周期圖示（中英文版）
下圖展示了實(shí)例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學(xué)習(xí)和使用，它的參考價(jià)值會(huì)越來越高。
vue生命周期英文版
<!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 創(chuàng)建前狀態(tài)===============》');console.log("%c%s", "color:red" , "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) },created: function () {console.group('created 創(chuàng)建完畢狀態(tài)===============》');console.log("%c%s", "color:red","el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },beforeMount: function () {console.group('beforeMount 掛載前狀態(tài)===============》');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 掛載結(jié)束狀態(tài)===============》');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 更新前狀態(tài)===============》');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 更新完成狀態(tài)===============》');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 銷毀前狀態(tài)===============》');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 銷毀完成狀態(tài)===============》');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 相關(guān)
在chrome瀏覽器里打開，F12看console就能發(fā)現(xiàn)beforecreated：el 和 data 并未初始化?
created:完成了 data 數(shù)據(jù)的初始化，el沒有
beforeMount：完成了 el 和 data 初始化?
mounted?：完成掛載
el還是 {{message}}，這里就是應(yīng)用的?Virtual DOM（虛擬Dom）技術(shù)，先把坑占住了。到后面mounted掛載的時(shí)候再把值渲染進(jìn)去。
update 相關(guān)
在 chrome console里執(zhí)行以下命令
app.message=?'yes?!! I?do';就能看到data里的值被修改后，將會(huì)觸發(fā)update的操作。
destroy 相關(guān)
有關(guān)于銷毀，暫時(shí)還不是很清楚。我們?cè)赾onsole里執(zhí)行下命令對(duì) vue實(shí)例進(jìn)行銷毀。銷毀完成后，我們?cè)僦匦赂淖僲essage的值，vue不再對(duì)此動(dòng)作進(jìn)行響應(yīng)了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了destroy操作，后續(xù)就不再受vue控制了。
app.$destroy();beforecreate?: 舉個(gè)栗子：可以在這加個(gè)loading事件?
created?：在這結(jié)束loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行?
mounted?： 在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
beforeDestroy： 你確認(rèn)刪除XX嗎？ destroyed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容
轉(zhuǎn)載于:https://www.cnblogs.com/zdz8207/p/vue-lifecycle.html
總結(jié)
以上是生活随笔為你收集整理的vue生命周期图示中英文版Vue实例生命周期钩子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
