vuejs生命周期函數

生命周期函數就是vue實例在某一個時間點會自動執行的函數

當我們創建一個實例的時候，也就是我們調用 new Vue() 這句話的時候，vue會幫助我們去創建一個實例，創建過程其實並不像我們想的那么簡單，他要經過很多的步驟

Init(Events & Lifecycle):首先他會去初始化事件和生命周期相關的內容,當最基礎的初始化完成的時候，在這個時間點上，vue會自動的幫我去之行一個函數，這個函數就是beforeCreate

beforeCreate：既然beforeCreate被自動之行，那么beforeCreate就是一個生命周期函數

var vm = new Vue({
　　el:'#app',
　　beforeCreate:function(){
　　　　console.log('before create')
　　}
})

我們發現這個在控制台被自動輸出了，就是vue自動執行了beforeCreate這個函數，處理完這個函數，vue會繼續調用一個寫外部的注入，包括雙向綁定的相關內容

Init(injections & reactivity): 外部的注射，各種綁定的初始化，這部分初始化完成的時候，基本上vue實例的初始化操作都完成了，在這個結點上，又會有一個自動的函數被執行,這個函數的名字叫created

created：這也是一個生命周期函數，因為他完全符合生命周期函數的定義

var vm = new Vue({
　　el:'#app',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　}
})

可以看到beforeCreate執行之后，created也被自動的執行了，繼續看這張圖

Has 'el' options:是否有el這個選項

Has 'template' optioins: 是否有template這個屬性

　　no->Compile el's outerHtml as template: 如果實例里面沒有tempalte這個屬性，會把外部el掛載點的html當作模板

　　yes->Compile template into render functoin: 如果實例里面有tempalte，這個時候就會用template去渲染

但是有了模板之后並沒有直接渲染到頁面上，在渲染之前，又自動到去執行了一個函數，這個函數是beforeMount

beforeMount:這個函數也是一個生命周期函數，也就是模板即將掛載到頁面到一瞬間，beforeMount會被執行

var vm = new Vue({
　　el:'#app',
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log('before mount')
　　}
})

可以看到beforeMount被執行了，在beforeMount執行完成后

Create vm.$el and replace 'el' width it: 模板結合數據會被掛載到頁面上，當dom掛載到頁面之上，這個時候又有一個生命周期函數被執行了

mounted:在beforeMount dom並沒有渲染到頁面上，在mounted dom已經被渲染到頁面上了,這個時候可以做個實驗

<div id='app'>
　　hello world　　
</div>

<script>
　　var vm = new Vue({
　　　　el:'#app',
　　　　template:'<h1>hello</h1>',
　　　　beforeCreate:function(){
　　　　　　console.log('before create')
　　　　},
　　　　created:function(){
　　　　　　console.log('created')
　　　　},
　　　　beforeMount:function(){
　　　　　　console.log(this.$el);
　　　　　　console.log('before mount')
　　　　},
　　　　mounted:function(){
　　　　　　console.log(this.$el);
　　　　　　console.log('mounted')
　　　　}
　　})
</script>

看到在beforeMount輸出當dom是<div id='app'>hello world</div>，，在mounted輸出的dom是<h1>hello</h1>這也印證了上面這張圖的內容，在beforeMount的時候頁面還沒有被渲染，在mounted的時候頁面已經被渲染完畢了

beforeDestroy,destroyed:

var vm = new Vue({
　　el:'#app',　　
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log(this.$el);
　　　　console.log('before mount')
　　},
　　mounted:function(){
　　　　console.log(this.$el);
　　　　console.log('mounted')
　　},
　　beforeDestroy:function(){
　　　　console.log('beforeDestroy')
　　},
　　destroyed:function(){
　　　　console.log('destroyed')
　　}
})

刷新頁面完畢，這個時候會發現beforeDestroy,destroyed並沒有被觸發，那什么時候被觸發呢

when vm.$destroy() is called:當destroy()這個方法被調用的時候會調用beforeDestroy，當全部銷毀的時候，destroyed會被執行，那怎么讓他執行呢，在控制台執行vm.$destroy()的時候會調用這兩個函數，還沒被銷毀之前會調用beforeDestroy，已經被銷毀后會調用destroyed這個函數

這張圖上還有兩個生命周期函數，叫做beforeUpdate和updated，這兩個生命周期函數在什么時候執行呢

beforeUpdate,updated:

var vm = new Vue({
　　el:'#app',
　　template:'<h1>hello</h1>',
　　beforeCreate:function(){
　　　　console.log('before create')
　　},
　　created:function(){
　　　　console.log('created')
　　},
　　beforeMount:function(){
　　　　console.log(this.$el);
　　　　console.log('before mount')
　　},
　　mounted:function(){
　　　　console.log(this.$el);
　　　　console.log('mounted')
　 },
　　beforeDestroy:function(){
　　　　console.log('beforeDestroy')
　　},
　　destroyed:function(){
　　　　console.log('destroyed')
　　},
　　beforeUpdate:function(){
　　　　console.log('before updated')
　　},
　　updated:function(){
　　　　console.log('updated')
　　}
})

刷新頁面看，發現這兩個鈎子函數其實並沒有被執行，那為什么沒有被執行呢，看圖解釋說是，when data changes，當數據發生改變的時候才會被執行

beforeUpdate：數據發生改變，還沒有被渲染之前，beforeUpdate會被執行

updated:當數據重新渲染之后，updated這個生命周期函數會被執行

教程里面只有8個生命周期函數，實際上有11個生命周期函數