1.什么是 vue 生命周期？有什么作用？

Vue 實(shí)例有?個(gè)完整的?命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程，稱這是Vue的?命周期。

各個(gè)生命周期作用

• beforeCreate（創(chuàng)建前） ：組件實(shí)例被創(chuàng)建之初，組件的屬性生效之前
• created（創(chuàng)建后） ：組件實(shí)例已經(jīng)完全創(chuàng)建，屬性也綁定，但真實(shí) dom 還沒有生成，$el 還不可用
• beforeMount（掛載前） ：在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用
• mounted（掛載后） ：在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子
• beforeUpdate（更新前） ：組件數(shù)據(jù)更新之前調(diào)用，真實(shí)DOM還沒被渲染
• update（更新后） ：組件數(shù)據(jù)更新之后
• activated（激活前） ：keep-alive專屬，組件被激活時(shí)調(diào)用
• deactivated（激活后） ：keep-alive專屬，組件被銷毀時(shí)調(diào)用
• beforeDestory（銷毀前） ：組件銷毀前調(diào)用
• destoryed（銷毀后） ：組件銷毀前調(diào)用

2. Vue子組件和父組件執(zhí)行順序

• 加載渲染過程：beforeCreate(父) —> created(父)—>beforeMount(父)—>beforeCreate(子)—>created(子)—>beforeMount(子)—>mounted(子)—>mounted(父)
• 更新過程：beforeUpdate(父) —> beforeUpdate(子) —> update(子) —> update(父)
• 銷毀過程：beforeDestory(父) —> beforeDestory(子) —> destoryed(子) —> destoryed(父)

3.簡述每個(gè)周期具體適合哪些場景

• beforeCreate：在new一個(gè)vue實(shí)例后，只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件，其他的東西都還沒創(chuàng)建。在beforeCreate生命周期執(zhí)行的時(shí)候，data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個(gè)階段使用data中的數(shù)據(jù)和methods中的方法
• create: data 和 methods都已經(jīng)被初始化好了，如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)，最早可以在這個(gè)階段中操作
• beforeMount：執(zhí)行到這個(gè)鉤子的時(shí)候，在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中，此時(shí)，頁面還是舊的
• mounted：執(zhí)行到這個(gè)鉤子的時(shí)候，就表示Vue實(shí)例已經(jīng)初始化完成了。此時(shí)組件脫離了創(chuàng)建階段，進(jìn)入到了運(yùn)行階段。 如果我們想要通過插件操作頁面上的DOM節(jié)點(diǎn)，最早可以在和這個(gè)階段中進(jìn)行
• beforeUpdate： 當(dāng)執(zhí)行這個(gè)鉤子時(shí)，頁面中的顯示的數(shù)據(jù)還是舊的，data中的數(shù)據(jù)是更新后的，頁面還沒有和最新的數(shù)據(jù)保持同步
• updated：頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的
• beforeDestory: Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段，這個(gè)時(shí)候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀
• destroyed： 這個(gè)時(shí)候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。

4. created 和 mounted 的區(qū)別

• created：在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
• mounted：在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

5. vue請求異步數(shù)據(jù)在哪個(gè)周期函數(shù)？

在created、beforeMount、mounted中進(jìn)行調(diào)用。因?yàn)樵谶@三個(gè)鉤子函數(shù)中，data 已經(jīng)創(chuàng)建，可以將服務(wù)端端返回的數(shù)據(jù)進(jìn)行賦值。

推薦在 created 鉤子函數(shù)中，優(yōu)點(diǎn)：

• 能更快獲取到服務(wù)端數(shù)據(jù)，減少頁面加載時(shí)間，用戶體驗(yàn)更好；
• SSR不支持 beforeMount 、mounted 鉤子函數(shù)，放在 created 中有助于一致性。

6. keep-alive 中的生命周期哪些

keep-alive是 Vue 提供的一個(gè)內(nèi)置組件，用來對組件進(jìn)行緩存——在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

如果為一個(gè)組件包裹了 keep-alive，那么它會(huì)多出兩個(gè)生命周期：deactivated、activated。同時(shí)，beforeDestroy 和 destroyed 就不會(huì)再被觸發(fā)了，因?yàn)榻M件不會(huì)被真正銷毀。

當(dāng)組件被換掉時(shí)，會(huì)被緩存到內(nèi)存中、觸發(fā) deactivated 生命周期；當(dāng)組件被切回來時(shí)，再去緩存里找這個(gè)組件、觸發(fā) activated鉤子函數(shù)。

7. 請?jiān)敿?xì)說下你對vue生命周期的理解？

總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。

• 創(chuàng)建前/后： 在beforeCreated階段，vue實(shí)例的掛載元素$el和數(shù)據(jù)對象data都為undefined，還未初始化。在created階段，vue實(shí)例的數(shù)據(jù)對象data有了，$el還沒有。
• 載入前/后：在beforeMount階段，vue實(shí)例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點(diǎn)，data.message還未替換。在mounted階段，vue實(shí)例掛載完成，data.message成功渲染。
• 更新前/后：當(dāng)data變化時(shí)，會(huì)觸發(fā)beforeUpdate和updated方法。
• 銷毀前/后：在執(zhí)行destroy方法后，對data的改變不會(huì)再觸發(fā)周期函數(shù)，說明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在。