vue進階問題

1.爲什麼要使用vue?

重點考察對vue的特性瞭解,三大框架的優缺點對比,以及跟傳統操作dom的區別

2.vue有哪些生命週期及其使用場景?
3.vue-router中keepalive怎麼理解?

keep-alive是vue源碼中實現的一個組件, 感興趣的可以研究源碼 https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js

什麼是keepalive
我們平時開發中, 總有部分組件沒有必要多次init, 我們需要將組件進行持久化,使組件狀態維持不變,在下一次展示時, 也不會進行重新init
keepalive音譯過來就是保持活着, 所以在vue中我們可以使用keepalive來進行組件緩存
基本使用

在這裏插入圖片描述

上面提到被keepalive包含的組件不會被再次init,也就意味着不會重走生命週期函數, 但是平常工作中很多業務場景是希望我們緩存的組件在再次渲染的能做一些事情,vue爲keepalive提供了兩個額外的hook
activated 當keepalive包含的組件再次渲染的時候觸發
deactivated 當keepalive包含的組件銷燬的時候觸發
注: 2.1.0 版本後keepalive包含但被exclude排除的組件不會有以上兩個hook
參數
keepalive可以接收3個屬性做爲參數進行匹配對應的組件進行緩存
include 包含的組件
exclude 排除的組件
max 緩存組件的最大值
其中include,exclude可以爲字符,數組,以及正則表達式
max 類型爲字符或者數字
代碼理解

在這裏插入圖片描述

配合router使用

在這裏插入圖片描述

總結
keepalive是一個抽象組件,緩存vnode,緩存的組件不會被mounted,爲此提供activated 和 deactivated 鉤子函數, 使用props max 可以控制緩存組件個數

4.Vue.use中都發生了什麼?

源碼地址: https://github.com/vuejs/vue/blob/dev/src/core/global-api/use.js

定義
vue.use()往全局注入一個插件,供全局真接使用, 不需要單獨引用
代碼理解:

在這裏插入圖片描述

理解了其基本使用及作用,我們來看一下vue.use中都發生了什麼
源碼很少,所以直接摘抄了

在這裏插入圖片描述

結合代碼理解

在這裏插入圖片描述

總結
vue.use()爲註冊全局插件所用,接收函數或者一個包含install屬性的對象爲參數,如果參數帶有install就執行install, 如果沒有就直接將參數當install執行, 第一個參數始終爲vue對象, 註冊過的插件不會重新註冊

5.New vue()中發生了什麼?

先從語法上分析,new關鍵字在js語言中代表實例化一個對象, 而Vue實際上是一個類, 我們簡單看一下源碼,源碼地址 https://github.com/vuejs/vue/blob/dev/src/core/instance/index.js

在這裏插入圖片描述

接着我們追蹤至_init函數,源碼地址 https://github.com/vuejs/vue/blob/dev/src/core/instance/init.js

在這裏插入圖片描述在這裏插入圖片描述

從上面的代碼我們看見_init很清淅的幹了幾件事, 合併相關配置, 初始化生命週期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等
題外話
Vue初始化邏輯非常清淅,把不同的功能拆成一些單獨的函數執行,這種思想值得借鑑和學習

6.Vue.js的template編譯過程?
7.Vue中的nextTick如何理解?

講在前面: 在vue中,數據發生變化之後DOM並不會立即變化,而是等同一事件循環中的所有數據變化完成之後,再統一進行視圖更新,代碼理解

在這裏插入圖片描述

nextTick什麼情況下會觸發
在同一事件循環中的數據變化後,DOM更新完成, 執行nextTick(callback)內的回調
對事件循環不理解的可以點這裏
vue中nextTick的實現 ,源碼地址 https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js

在這裏插入圖片描述

總結
數據的變化到 DOM 的重新渲染是一個異步過程, 我們必須在 nextTick 後執行DOM相關的操作

8.Vue-router有哪些鉤子?使用場景?

前面我們用大白話講過什麼是鉤子,這裏在重複一下,就是在什麼什麼之前,什麼什麼之後,英文叫hooks,專業點叫生命週期,裝逼點可以叫守衛…
vue-router中也存在鉤子的概念,分爲三步記憶
全局守衛
路由獨享守衛
組件獨享守衛
全局守衛
很好理解,全局守衛就是能監聽到全局的router動作
router.beforeEach 路由前置時觸發在這裏插入圖片描述
組件獨享守衛
組件內新一個守衛, beforeRouteUpdate,在組件可以被複用的情況下觸發,如 /demo/:id, 在/demo/1 跳轉/demo/2的時候,/demo 可以被複用,這時會觸發beforeRouteUpdate

在這裏插入圖片描述

注意在beforeRouteEnter前不能拿到當前組件的this,因爲組件還有被創建,我們可以通過next(vm => {console.log(vm)}) 回傳當前組件的this進行一些邏輯操作
使用場景
路由進入前最典型的可以做一些權限控制, 路由離開時清除或存儲一些信息,任務等等
總結
vue-router中鉤子分爲全局的,局部的,以及組件三種形式, 他們都有前置守衛以及後置守衛, 其中組件的前置守衛不能拿到當前組件的this,因組件還沒有被創建,可以通過next的參數進行回傳this,前置守衛必須調用next方法,否則不會進入下一個管道

9.什麼情況下適合使合vuex? Vuex使用中有幾個步驟?

持續更新中…

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章