vue、vue-router 知識梳理

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

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

vue vue生命周期

Vue 實例從創(chuàng)建到銷毀的過程，就是生命周期。

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/103626.html

相關(guān)文章

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

摘要：各位看官沒看過功能梳理的可以先閱讀下源碼學習一功能梳理前車之鑒有了源碼學習的經(jīng)驗，每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一遍源代碼。大體了解這個源代碼的脈絡(luò)，每個階段做了什么，文件目錄的劃分。各位看官沒看過功能梳理的可以先閱讀下Vuex源碼學習（一）功能梳理. 前車之鑒有了vue-router源碼學習的經(jīng)驗，每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一...

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

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

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

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

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

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

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

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

iliyaku 2019-08-23 12:03 評論0 收藏0