一昏兆、生命周期函數(shù)
beforeCreate:創(chuàng)建前
1、當(dāng)前vue實(shí)例化的時(shí)候會(huì)做一個(gè)初始化的操作廓推,在這個(gè)生命周期函數(shù)里面我們可以做初始化的loading
2颓帝、在當(dāng)前函數(shù)里面是訪問(wèn)不到data中的屬性励堡,但是可以通過(guò)vue的實(shí)例對(duì)象進(jìn)行訪問(wèn)
created:創(chuàng)建后
1谷丸、當(dāng)beforeCreate執(zhí)行完畢以后,會(huì)執(zhí)行created. 在當(dāng)前函數(shù)中我們可以訪問(wèn)到data中的屬性
2念秧、當(dāng)前生命周期函數(shù)執(zhí)行的時(shí)候會(huì)將data中所以的屬性和methods身上所以的方法添加到vue的實(shí)例身上淤井,同時(shí)
會(huì)將data中所有的屬性添加一個(gè)getter/setter方法
3、如果需要進(jìn)行前后端上數(shù)據(jù)交互(ajax請(qǐng)求的時(shí)候) 需要在當(dāng)前生命周期中使用
beforeMount:掛載前(渲染)
render函數(shù)初次被調(diào)用---->數(shù)據(jù)和模板沒(méi)有進(jìn)行相結(jié)合,同時(shí)還沒(méi)有渲染到html頁(yè)面上
可以在此做渲染前data中數(shù)據(jù)最后的修改
mounted:掛載后
1币狠、數(shù)據(jù)和模板進(jìn)行相結(jié)合游两,渲染成真實(shí)的DOM結(jié)構(gòu)
2、在當(dāng)前生命周期函數(shù)里面我們可以訪問(wèn)到真實(shí)的DOM結(jié)構(gòu),
3漩绵、在vue中我們可以通過(guò)refs.屬性
beforeDestroy:銷毀前
銷毀之前還可以訪問(wèn)到DOM結(jié)構(gòu) 以及相關(guān)的數(shù)據(jù)(data)
在這個(gè)生命周期函數(shù)中我們可以將綁定的事件進(jìn)行移除
destroyed:銷毀后
在這個(gè)生命周期函數(shù)中會(huì)將數(shù)據(jù)和模板之間的關(guān)系斷開(kāi)(不是你的做的)
在這個(gè)生命周期函數(shù)中我們還是可以訪問(wèn)到data中的屬性
但是訪問(wèn)不到真實(shí)的DOM結(jié)構(gòu)了
beforeUpdate:更新前
只要data中的屬性發(fā)生了改變,那么這個(gè)生命周期就會(huì)執(zhí)行止吐,render函數(shù)再次會(huì)執(zhí)行
在這個(gè)生命周期函數(shù)中我們可以對(duì)數(shù)據(jù)進(jìn)行最后的修改宝踪,同時(shí)也可以訪問(wèn)到最新的DOM結(jié)構(gòu)和數(shù)據(jù)
updated:更新后
在當(dāng)前生命周期函數(shù)中我們可以訪問(wèn)到最新的DOM結(jié)構(gòu)(數(shù)據(jù)更新后最新的DOM結(jié)構(gòu))和數(shù)據(jù)
二、路由守衛(wèi)
路由鉤子函數(shù)有三種:
全局鉤子: beforeEach(全局前置守衛(wèi))碍扔、 afterEach(全局后置鉤子)
路由獨(dú)享的守衛(wèi)(單個(gè)路由里面的鉤子): beforeEnter
組件路由:beforeRouteEnter瘩燥、 beforeRouteUpdate、 beforeRouteLeave
三不同、keep-alive
activated:當(dāng)緩存組件有被顯示出來(lái)時(shí)厉膀,會(huì)觸發(fā)這個(gè)鉤子函數(shù)
deactivated:當(dāng)緩存的組件隱藏時(shí),會(huì)觸發(fā)這個(gè)鉤子函數(shù)
四二拐、自定義指令
bind:只調(diào)用一次服鹅,指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置百新。
inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在企软,但不一定已被插入文檔中)。
update:所在組件的節(jié)點(diǎn)更新時(shí)調(diào)用饭望,但是可能發(fā)生在其子節(jié)點(diǎn)更新之前仗哨。指令的值可能發(fā)生了改變,也可能沒(méi)有铅辞。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新
componentUpdated:指令所在組件的節(jié)點(diǎn)及其子節(jié)點(diǎn)全部更新后調(diào)用藻治。
unbind:只調(diào)用一次,指令與元素解綁時(shí)調(diào)用巷挥。