一、簡述vuex的工作流程。
什么是vuex:vuex是一個專門為vue.js應(yīng)運程序開發(fā)的狀態(tài)管理模式
我們在組件中可以通過this.$store.dispath提交一個action,在action中我們可以執(zhí)行一系列異步操作良风∫昶或者根據(jù)不同的情況分發(fā)不同的mutation,接著在action中調(diào)用commit觸發(fā)mutation方法烟央,所有修改state的操作全部全都放在mutation中來做统诺。只要state中的數(shù)據(jù)發(fā)生了改變,那么組件中應(yīng)用到數(shù)據(jù)的所有視圖都會更新疑俭。
二粮呢、v-router導航首位(鉤子函數(shù))
1、全局導航首位
router.beforeEach 全局前置首位
當一個導航觸發(fā)時钞艇,前置守衛(wèi)最先觸發(fā)啄寡。
router.beforeResolve (v 2.5.0+) 全局解析守衛(wèi) 和beforeEach類似
區(qū)別是在導航被確認之前,同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后香璃,解析守衛(wèi)就被調(diào)用 即在 beforeEach 和 組件內(nèi)beforeRouteEnter 之后
router.afterEach 全局后置守衛(wèi)
在所有路由跳轉(zhuǎn)結(jié)束的時候調(diào)用这难。
2舟误、路由導航首位
beforeEnter 路由前置守衛(wèi)
可直接定義在路由配置上葡秒,和beforeEach方法參數(shù)、用法相同嵌溢。
3眯牧、組件路由守衛(wèi)
beforeRouteEnter 在渲染該組件的對應(yīng)路由被確認前調(diào)用,用法和參數(shù)與beforeEach類似
beforeRouteUpdate 在當前路由改變,并且該組件被復(fù)用時調(diào)用
beforeRouteLeave 導航離開該組件的對應(yīng)路由時調(diào)用赖草,可以訪問組件實例 this学少,next需要被主動調(diào)用,不能傳回調(diào)秧骑。
三版确、詳述keep-alive組件
1、為什么使用keep-alive乎折?
在Vue中绒疗,我們使用component內(nèi)置組件或者vue-router切換視圖的時候,由于Vue會主動卸載不使用的組件骂澄,所以我們不能保存組件之前的狀態(tài)吓蘑,而我們經(jīng)常能遇到需要保存之前狀態(tài)的需求,例如搜索頁(保存搜索記錄)坟冲,列表頁(保存之前的瀏覽記錄)等等
2磨镶、keep-alive的作用?
keep-alive是一個Vue的內(nèi)置組件健提,它能將不活動的組件保存下來琳猫,而不是直接銷毀,當我們再次訪問這個組件的時候私痹,會先從keep-alive中存儲的組件中尋找沸移,如果有緩存的話痪伦,直接渲染之前緩存的,如果沒有的話雹锣,再加載對應(yīng)的組件网沾。
作為抽象組件,keep-alive是不會直接渲染在DOM中的.
3蕊爵、keep-alive的屬性辉哥?
keep-alive提供了三個可選屬性
include - 字符串或數(shù)組或正則表達式。只有名稱匹配的組件會被緩存攒射。
exclude - 字符串或數(shù)組或正則表達式醋旦。名稱匹配的組件不會被緩存。
max - 數(shù)字類型会放。表示最多可以緩存多少組件實例饲齐。
4、對于keep-alive需要知道的事情咧最?
keep-alive提供了兩個生命鉤子捂人,分別是activated與deactivated。因為keep-alive會將組件保存在內(nèi)存中矢沿,并不會銷毀以及重新創(chuàng)建滥搭,所以不會重新調(diào)用組件的created等方法,需要用activated與deactivated這兩個生命鉤子來得知當前組件是否處于活動狀態(tài)捣鲸。
四瑟匆、v-show與v-if的區(qū)別
在條件為真的情況下v-if與v-show都渲染數(shù)據(jù),在條件為假的情況下v-if不渲染數(shù)據(jù)栽惶,v-show渲染數(shù)據(jù)但將不符合條件的display:none愁溜;
v-if有更高的切換成本,v-show有更高的渲染成本外厂。頻繁的切換建議使用v-show冕象。
五、vue中key的作用
在diff算法中酣衷,Vue使用 key 值來判斷元素是否發(fā)生更改交惯,以達到重復(fù)使用頁面上所有可復(fù)用元素,特別是在列表渲染中穿仪,Vue通過key值來判斷元素是否需要更新席爽,如果元素只是更換位置的話,就不需要重新渲染啊片,這也是為什么我們在列表渲染的時候為什么始終不建議使用元素的索引值來作為 key 值只锻,因為索引值始終會發(fā)生改變,會增加Vue的渲染成本紫谷。
六齐饮、assets和static的區(qū)別
static該目錄下的文件不會被webpack處理捐寥,他們會被直接復(fù)制到最終的打包目錄下面的。并且必須使用絕對路徑來引用這些組價祖驱。
assets中的文件夾會經(jīng)過webpack打包握恳,并重新編譯。
七捺僻、computed 乡洼、 methods、 watch的區(qū)別
computed 計算屬性是基于內(nèi)部的響應(yīng)式依賴進行計算緩存的匕坯,所謂的響應(yīng)式依賴就是被我們vue實例所監(jiān)聽的數(shù)據(jù)束昵。
computed計算屬性是擁有緩存的,我們每次訪問同一個計算屬性葛峻,只要內(nèi)部依賴沒有發(fā)生改變锹雏,它都不會重新計算。
methods 方法是調(diào)用函數(shù)术奖,我們多次使用就等于多次調(diào)用這個函數(shù)礁遵,函數(shù)是沒有內(nèi)存的,所以每次都重新計算腰耙,每次渲染都會被重新調(diào)用榛丢。
@
watch 監(jiān)聽器用來監(jiān)聽屬性铲球,執(zhí)行異步操作挺庞,不具有緩存性,只要監(jiān)聽的對象發(fā)生了改變就會立即執(zhí)行