vue、vue-router 知識(shí)梳理

妤鋒シ發(fā)布于2019-08-23 16:59 / 2686人閱讀

摘要：生命周期實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是生命周期。銷(xiāo)毀前調(diào)用銷(xiāo)毀后調(diào)用，實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

vue vue生命周期

Vue 實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是生命周期。

同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶(hù)在不同階段添加自己的代碼的機(jī)會(huì)，利用各個(gè)鉤子來(lái)完成我們的業(yè)務(wù)代碼，鉤子如下：

1.beforeCreate
實(shí)例初始化之后、創(chuàng)建實(shí)例之前被調(diào)用，此時(shí)數(shù)據(jù)觀察和事件配置都還沒(méi)好準(zhǔn)備好
2.created
實(shí)例創(chuàng)建完成后被調(diào)用，此時(shí)data有了，dom還沒(méi)有，掛載屬性el還沒(méi)生成

3.beforeMount
將編譯完成的html掛載到對(duì)應(yīng)的虛擬dom時(shí)調(diào)用，此時(shí)相關(guān)的render函數(shù)首次被執(zhí)行，頁(yè)面還沒(méi)有內(nèi)容，表達(dá)式{{ }}的值還未被替換
4.mounted
編譯好的html掛載到頁(yè)面完成后調(diào)用，此時(shí)頁(yè)面已經(jīng)被渲染出數(shù)據(jù)

5.beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過(guò)程。
6.update
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。

7.beforeDestroy
銷(xiāo)毀前調(diào)用
8.destroyed
銷(xiāo)毀后調(diào)用，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

云服務(wù)器 GPU云服務(wù)器 vue-router 梳理多云管理平臺(tái)調(diào)研,流程梳理 Vue_Vue

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103626.html

相關(guān)文章

Vuex源碼學(xué)習(xí)（二）脈絡(luò)梳理

摘要：各位看官?zèng)]看過(guò)功能梳理的可以先閱讀下源碼學(xué)習(xí)一功能梳理前車(chē)之鑒有了源碼學(xué)習(xí)的經(jīng)驗(yàn)，每次看認(rèn)真鉆研源代碼的時(shí)候都會(huì)抽出一小段時(shí)間來(lái)大體瀏覽一遍源代碼。大體了解這個(gè)源代碼的脈絡(luò)，每個(gè)階段做了什么，文件目錄的劃分。各位看官沒(méi)看過(guò)功能梳理的可以先閱讀下Vuex源碼學(xué)習(xí)（一）功能梳理. 前車(chē)之鑒有了vue-router源碼學(xué)習(xí)的經(jīng)驗(yàn)，每次看認(rèn)真鉆研源代碼的時(shí)候都會(huì)抽出一小段時(shí)間來(lái)大體瀏覽一...

chenjiang3 2019-08-23 16:18 評(píng)論0 收藏0
一篇搞定vue-Router導(dǎo)航守衛(wèi)

摘要：如果我們不掉用守衛(wèi)中的，迭代器的肯定并不會(huì)執(zhí)行，守衛(wèi)的迭代就停止了，守衛(wèi)堵塞并不會(huì)執(zhí)行完畢，也就不會(huì)由后面的更細(xì)路由操作了。 vue-router導(dǎo)航守衛(wèi) 在本期文章中，我將為大家梳理弄明白以下幾個(gè)事情， 1:導(dǎo)航守衛(wèi)的執(zhí)行順序是怎么樣的？ 2:導(dǎo)航守衛(wèi)中的next的用處？ 3:為什么afterEach守衛(wèi)沒(méi)有next？ 4:beforeEach是否可以疊加？ 5:路由跳轉(zhuǎn)經(jīng)歷了哪幾部...

不知名網(wǎng)友 2019-08-23 12:12 評(píng)論0 收藏0
vue-router 基礎(chǔ)知識(shí)點(diǎn)

摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。模式的原理是事件監(jiān)測(cè)值變化，可以在對(duì)象上監(jiān)聽(tīng)這個(gè)事件。這兩個(gè)方法應(yīng)用于瀏覽器記錄棧，在當(dāng)前已有的基礎(chǔ)之上，它們提供了對(duì)歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時(shí)所說(shuō)的硬件路由器，這里的路由就是SPA（單頁(yè)應(yīng)用）的路徑管理器。再通俗的說(shuō)，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。vue-router是...

ningwang 2019-08-26 10:41 評(píng)論0 收藏0
vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制

摘要：二接口訪問(wèn)的權(quán)限控制接口權(quán)限就是對(duì)用戶(hù)的校驗(yàn)。代碼如下按扭權(quán)限指令至此為止，權(quán)限控制流程就已經(jīng)完全結(jié)束了，在最后我們?cè)倏匆幌峦暾臋?quán)限控制流程圖吧五路由控制完整流程圖六參考文獻(xiàn)手?jǐn)]后臺(tái)管理網(wǎng)站之權(quán)限控制手摸手，帶你用擼后臺(tái)之權(quán)限控制原文首發(fā)于我的博客，歡迎點(diǎn)擊查看獲得更好的閱讀體驗(yàn)~ 一、前言在廣告機(jī)項(xiàng)目中，角色的權(quán)限管理是卡了挺久的一個(gè)難點(diǎn)。首先我們確定的權(quán)限控制分為兩大部分，其...

songze 2019-08-02 16:06 評(píng)論0 收藏0
vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制

摘要：二接口訪問(wèn)的權(quán)限控制接口權(quán)限就是對(duì)用戶(hù)的校驗(yàn)。代碼如下按扭權(quán)限指令至此為止，權(quán)限控制流程就已經(jīng)完全結(jié)束了，在最后我們?cè)倏匆幌峦暾臋?quán)限控制流程圖吧五路由控制完整流程圖六參考文獻(xiàn)手?jǐn)]后臺(tái)管理網(wǎng)站之權(quán)限控制手摸手，帶你用擼后臺(tái)之權(quán)限控制原文首發(fā)于我的博客，歡迎點(diǎn)擊查看獲得更好的閱讀體驗(yàn)~ 一、前言在廣告機(jī)項(xiàng)目中，角色的權(quán)限管理是卡了挺久的一個(gè)難點(diǎn)。首先我們確定的權(quán)限控制分為兩大部分，其...

iliyaku 2019-08-23 12:03 評(píng)論0 收藏0