網(wǎng)上有長(zhǎng)篇很專(zhuān)業(yè)的講述vue生命周期及鉤子函數(shù)的文章而账，相信大家都看過(guò)不少胰坟，本文主要是結(jié)合自己的理解，更加通俗易懂泞辐。先看官網(wǎng)貼上地址
官網(wǎng)的生命周期圖請(qǐng)牢記于心笔横！
-
了解一下：
客戶(hù)端渲染過(guò)程
處理 HTML 標(biāo)記并構(gòu)建 DOM 樹(shù)。
處理 CSS 標(biāo)記并構(gòu)建 CSSOM 樹(shù)咐吼。
將 DOM 與 CSSOM 合并成一個(gè)渲染樹(shù)吹缔。
根據(jù)渲染樹(shù)來(lái)布局，以計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息汽烦。
將各個(gè)節(jié)點(diǎn)繪制到屏幕上涛菠。
Vue實(shí)例有一個(gè)完整的生命周期，也就是說(shuō)從開(kāi)始創(chuàng)建撇吞、初始化數(shù)據(jù)俗冻、編譯模板、掛在DOM牍颈、渲染-更新-渲染迄薄、卸載等一系列過(guò)程，我們成為Vue 實(shí)例的生命周期煮岁，鉤子就是在某個(gè)階段給你一個(gè)做某些處理的機(jī)會(huì)讥蔽。
- 首先看下生命周期鉤子函數(shù)的寫(xiě)法：
比如
mounted: function() {}
或者
mounted() {}
注意點(diǎn)，Vue的所有生命周期函數(shù)都是自動(dòng)綁定到this的上下文上画机。所以冶伞，你這里使用箭頭函數(shù)的話，就會(huì)出現(xiàn)this指向的父級(jí)作用域步氏，就會(huì)報(bào)錯(cuò)响禽。
不要寫(xiě)成這樣：
mounted:() => {}
- 生命周期鉤子函數(shù)詳解
beforeCreate()：組件實(shí)例剛剛創(chuàng)建，還未進(jìn)行數(shù)據(jù)觀測(cè)和事件配置荚醒。
在beforeCreate中拿不到任何數(shù)據(jù)芋类。
created()：實(shí)例已經(jīng)創(chuàng)建完成，并且已經(jīng)進(jìn)行數(shù)據(jù)的觀測(cè)和事件配置界阁。
在created中已經(jīng)可以拿到data中的數(shù)據(jù)了侯繁，但是dom還沒(méi)有掛載。會(huì)判斷有無(wú)el泡躯，如果沒(méi)有el則停止后面的模板掛載
（在實(shí)例創(chuàng)建完成后被立即調(diào)用贮竟，使用場(chǎng)景:請(qǐng)求和初始化數(shù)據(jù)丽焊，可以訪問(wèn)響應(yīng)式數(shù)據(jù)、監(jiān)聽(tīng)實(shí)例事件）
beforeMount()： 掛載/模板編譯之前
和 created 拿到的數(shù)據(jù)相同 在掛載開(kāi)始之前被調(diào)用
虛擬dom已經(jīng)創(chuàng)建完成坝锰，馬上就要渲染粹懒，在這里做初始數(shù)據(jù)的獲取重付，可以訪問(wèn)el（掛載根節(jié)點(diǎn)）但是無(wú)法訪問(wèn)refs（真實(shí)節(jié)點(diǎn)）
mounted()： 模板編譯之后顷级，已經(jīng)掛載，此時(shí)才會(huì)渲染頁(yè)面确垫，才能看到頁(yè)面上數(shù)據(jù)的展示弓颈。可以獲取到真實(shí)的$el
數(shù)據(jù)删掀、真實(shí)dom都已經(jīng)處理好了翔冀，事件也掛載好了
mounted使用場(chǎng)景:常用于獲取VNode信息和操作，ajax請(qǐng)求
注意 mounted 不會(huì)承諾所有的子組件也都一起被掛載披泪。如果你希望等到整個(gè)視圖都渲染完畢纤子，可以用 vm.$nextTick 替換掉 mounted
beforeUpdate()： 組件更新之前
updated()：組件更新之后
beforeDestroy()： 組件銷(xiāo)毀之前
destroyed()：組件銷(xiāo)毀之前
-
mounted()和create()的區(qū)別與例子：https://blog.csdn.net/xdnloveme/article/details/78035065
created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值款票，然后再渲染成視圖控硼。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后艾少，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作卡乾。
其實(shí)兩者比較好理解，通常created使用的次數(shù)多缚够，而mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作幔妨，
比如：插件chart.js的使用: var ctx = document.getElementById(ID); 通常會(huì)有這一步，而如果你寫(xiě)入組件中谍椅，你會(huì)發(fā)現(xiàn)在created中無(wú)法對(duì)chart進(jìn)行一些初始化配置误堡，一定要等這個(gè)html渲染完后才可以進(jìn)行，那么mounted就是不二之選雏吭。
遇到過(guò)的一個(gè)問(wèn)題（組件中）：
created頁(yè)面還沒(méi)渲染出來(lái)锁施，mounted頁(yè)面已經(jīng)渲染了，
cmsIndex中思恐，我在created中獲取了getId方法沾谜，在子組件中，去監(jiān)聽(tīng)id的變化胀莹，此時(shí)第一次監(jiān)聽(tīng)不到getId方法基跑。因?yàn)閣atch的層級(jí)，第一次想在created函數(shù)中調(diào)用函數(shù)的時(shí)候描焰，此時(shí)媳否，還沒(méi)有獲取到getId方法栅螟，就進(jìn)入watch了。
可以使用vm.$nextTick 和 在mounted里調(diào)用篱竭，去解決力图。
