資訊專欄INFORMATION COLUMN
摘要：注意看下此時還是沒有選項鉤子函數(shù)和間的生命周期在這一階段發(fā)生的事情還是比較多的。鉤子函數(shù)和鉤子函數(shù)間的生命周期當(dāng)發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變，會觸發(fā)對應(yīng)組件的重新渲染，先后調(diào)用和鉤子函數(shù)。
首先，每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個過程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會很熟悉：
可以看到在vue一整個的生命周期中會有很多鉤子函數(shù)提供給我們在vue生命周期不同的時刻進行操作, 那么先列出所有的鉤子函數(shù)，然后我們再一一詳解:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
先來一波代碼，各位復(fù)制在瀏覽器中運行，打開console查看就行了：
vue生命周期學(xué)習(xí) {{message}}
運行后打開console可以看到打印出來內(nèi)容如下:
可以看到一個vue實例在創(chuàng)建過程中調(diào)用的幾個生命周期鉤子。
在這個生命周期之間，進行初始化事件，進行數(shù)據(jù)的觀測，可以看到在created的時候數(shù)據(jù)已經(jīng)和data屬性進行綁定（放在data中的屬性當(dāng)值發(fā)生改變的同時，視圖也會改變）。
注意看下：此時還是沒有el選項
在這一階段發(fā)生的事情還是比較多的。
首先會判斷對象是否有el選項。如果有的話就繼續(xù)向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命周期，直到在該vue實例上調(diào)用vm.$mount(el)。此時注釋掉代碼中:
el: "#app",
然后運行可以看到到created的時候就停止了：
如果我們在后面繼續(xù)調(diào)用vm.$mount(el),可以發(fā)現(xiàn)代碼繼續(xù)向下執(zhí)行了
vm.$mount(el) //這個el參數(shù)就是掛在的dom接點
然后，我們往下看，template參數(shù)選項的有無對生命周期的影響。
（1）.如果vue實例對象中有template參數(shù)選項，則將其作為模板編譯成render函數(shù)。
（2）.如果沒有template選項，則將外部HTML作為模板編譯。
（3）.可以看到template中的模板優(yōu)先級要高于outer HTML的優(yōu)先級。
修改代碼如下, 在HTML結(jié)構(gòu)中增加了一串html，在vue對象中增加了template選項：
vue生命周期學(xué)習(xí) {{message + "這是在outer HTML中的"}}
執(zhí)行后的結(jié)果可以看到在頁面中顯示的是：
那么將vue對象中template的選項注釋掉后打印如下信息：
這下就可以想想什么el的判斷要在template之前了~是因為vue需要通過el找到對應(yīng)的outer template。
在vue對象中還有一個render函數(shù)，它是以createElement作為參數(shù)，然后做渲染操作，而且我們可以直接嵌入JSX.
new Vue({
el: "#app",
render: function(createElement) {
return createElement("h1", "this is createElement")
}
})
可以看到頁面中渲染的是：
所以綜合排名優(yōu)先級：
render函數(shù)選項 > template選項 > outer HTML.
可以看到此時是給vue實例對象添加$el成員，并且替換掉掛在的DOM元素。因為在之前console中打印的結(jié)果可以看到beforeMount之前el上還是undefined。
4. mounted注意看下面截圖：
在mounted之前h1中還是通過{{message}}進行占位的，因為此時還有掛在到頁面上，還是JavaScript中的虛擬DOM形式存在的。在mounted之后可以看到h1中的內(nèi)容發(fā)生了變化。
當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生了改變，會觸發(fā)對應(yīng)組件的重新渲染，先后調(diào)用beforeUpdate和updated鉤子函數(shù)。我們在console中輸入：
vm.message = "觸發(fā)組件更新"
發(fā)現(xiàn)觸發(fā)了組件的更新：
beforeDestroy鉤子函數(shù)在實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。
destroyed鉤子函數(shù)在Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。
本文是個人對vue的生命周期的理解，有什么不對的地方還請大牛多多指點~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88716.html
摘要：實例在文檔中經(jīng)常會使用這個變量名表示實例，在實例化時，需要傳入一個選項對象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項。通俗說就是實例從創(chuàng)建到銷毀的過程，就是生命周期。 Vue 實例中的生命周期鉤子 Vue 框架的入口就是 Vue 實例，其實就是框架中的 view model ，它包含頁面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程...
摘要：實例化發(fā)生了什么詳解生命周期本文將對的生命周期進行詳細(xì)的講解讓你了解一個實例的誕生都經(jīng)歷了什么我在上建立了一個存放筆記的倉庫以后會陸續(xù)更新一些知識和項目中遇到的坑有興趣的同學(xué)可以去看看哈歡迎傳送門實例化一個這是一個方法觸發(fā)鉤子函數(shù)組件實例剛 實例化vue發(fā)生了什么?(詳解vue生命周期) 本文將對vue的生命周期進行詳細(xì)的講解,讓你了解一個vue實例的誕生都經(jīng)歷了什么~ 我在Githu...
摘要：在這一步，實例已完成以下的配置數(shù)據(jù)觀測，屬性和方法的運算，事件回調(diào)?？梢灾苯訉懙葮?biāo)簽的寫法之前會的工程師上手框架的成本較低 簡介 1.美團工程師推出的基于Vue.js封裝的用于開發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點3.可完全組件化開發(fā) 特點 1.組件化開發(fā)2.完成的Vue.js開發(fā)體驗(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構(gòu)建項目5.最終H5...
閱讀 3707·2021-11-11 10:58
閱讀 2490·2021-09-22 15:43
閱讀 2878·2019-08-30 15:44
閱讀 2201·2019-08-30 13:08
閱讀 1831·2019-08-29 17:28
閱讀 894·2019-08-29 10:54
閱讀 686·2019-08-26 11:46
閱讀 3515·2019-08-26 11:43
