vue 面試

v-if 和v-for 哪個優先順序更高?如果兩個同時出現，應該怎麼優化得到更好的效能?

原始碼中找答案compiler/codegen/index.js

兩者不同級時，渲染函式如下

(function anonymous(){
with(this){return _c('div',{attrs:{"id":"demo"}},[_v("v-for和v-if誰的優先順序更高？ 應該")]),_v(""),
(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e(),2)}
})
 

如果同時出現，每次渲染都會先執行迴圈再判斷條件，無論如何迴圈都不可避免，浪費效能

要避免出現這種情況，則在外層巢狀template，在這一層進行v-if判斷，然後在內部進行v-for迴圈

2.談一下你對MVVM原理的理解？

檢視中抽出 DOM元素 通過view 我們可以直接渲染檢視 檢視可以更改 view會監聽當前事件 把事件寫回檢視

3.請說一下響應式資料的原理？

核心點：Object.defineProperty

預設vue在初始化資料時，會給data中的屬性使用Object.defineProperty重新定義所有屬性，當頁面取到對應屬性時。會進行依賴收集(收集當前元件的watcher)如果屬性發生變化會通知相關依賴進行更新操作。 在獲取和設定的時候 我們可以增加自己的邏輯 這個邏輯就叫做依賴收集

vue中是如何檢測陣列變化？

使用函式劫持的方式，重寫了陣列的方法

7種方法會更改陣列

push  pop  shift   unshift  splice sort reverse

01.談談你對vue的一個理解

漸進式的JavaScript框架  
核心庫加外掛
動態建立使用者介面
特點：
mvvm模式， 程式碼簡潔  體積小，能夠 提高執行效率
適合Pc端和移動端的開發    本身只關注ui  和react相似  
可以輕鬆引入vue外掛以及其他的第三方庫進行開發  
------------------  前提  資料繫結、虛擬dom
vue是借鑑了angular的模板、資料繫結技術、借鑑了React的元件化和虛擬dom技術 
 

viewModel 連線 Model和view之間的一個橋樑 ，資料發生改變更新時，通過view Model通知view來進行一個檢視層的展示改變 ，同時如果檢視層發生改變時 也會通過viewModel通知Model層來改變資料

2.view是如何實現響應式資料的呢？

當資料改變後 vue會通知到使用該資料的程式碼 檢視渲染使用了一個數據 資料改變後 試圖會響應是否自動更新 通過Objecy.defineProperty來更新定義data中的所有屬性 使資料的獲取 設定get and set增加一個攔截的功能 攔截屬性的獲取進行一個依賴的收集 攔截屬性的更新操作 進行一個通知

3.vue中如何檢測陣列變化？

引起陣列變化的方法7種方法 只要執行了 那麼他就會改變陣列內容 然後更新這些操作就行了

4.怎麼去響應監測這個陣列變化？ 使用函式劫持的方法 重寫了陣列方法 具體就是改變了陣列的原型(改變了自己的) 使用者呼叫陣列的一些方法的時候 走的就是我自己的方法 通知檢視層去更新 陣列種的每一項可能是物件 那麼我們就會對陣列的每一項進行觀測 並且只有數組裡面的物件才能進行觀測 觀測過的就不會再觀測了 vue3中直接監聽物件陣列的變化

5.Vue的事件繫結原理

​ 哪兩種 分別採用什麼實現的 第一種是元素的dom事件的繫結 addEvenListener實現 第二種就是元件的繫結事件 採用的是\(on方法 元素dom的繫結它一個具體 就是Vue在建立真實dom的時候 它是會呼叫createEml 它預設會呼叫這個invokeCreateHooks 它是會遍歷當前平臺上相對應的屬性 然後進行一個處理程式碼 其中就有一個updateDomLIstener的方法，內部傳入的就是add方法 如果要解釋 元件繫結事件 vue它是通過自定義的\)on方法實現的

6.v-model種的實現原理 以及如何自定義v-model

首先解釋一下 v-model 我們可以把它看成value加Input方法的語法糖 原生v-model它是會根據標籤的不同 生成不同的事件還有屬性 然後解析一個指令出來 自定義寫自己的Model屬性 可以在裡面放prop 還要event

7.為什麼vue它是非同步渲染的？

vue它是一個元件級更新的 所以如果它不採用非同步更新的話 那麼每次更新陣列 他都會對當前的元件進行一個重新渲染 為了效能的話 它是會在本輪資料更新後再非同步更新檢視的 核心思想就是nextTick nextTick就是一個非同步方法 它是非同步渲染的最後一步 它裡面利用的就是巨集任務和微任務 來構建的一個非同步方法 巨集任務 setTimeout 微任務 是Promise這種 多次呼叫nextTick它是會存入一個佇列的 每次 他都會通過這個非同步的方法然後來清空這個佇列 達到了那個非同步更新的效果

v-model

v-model如果為了不同元素繫結資料，則使用不同的元素property，並丟擲不同的事件 
v-model本質上是語法糖，它負責監聽使用者的輸入事件以更新資料  
對input使用v-model，實際上是指定其：value和input事件
----修飾符
 lazy修飾符讓內容在“change”事件時而非“input”事件時更新
 v-model新增number修飾符，可以自動將使用者的輸入值轉為數值型別
 可以給v-model新增trim修飾符，自動過濾使用者輸入的首尾空白字元
 v-model新增number修飾符，如果這個值無法被parseFloat()解析，則會返回原始的值

生命週期

vue的生命週期的鉤子函式中mounted和beforeDestroy中都可以獲取到DOM元素  
beforeMount\destroyed鉤子函式不可以直接獲取DOM元素 

vue2 和vue3

vue3的組合API中的setup()方法包含了所有的基本內容，包括了生命週期，可以在setup()中使用生命週期鉤子函式
vue3中Template支援多個根標籤，vue2不支援
vue3中的生命週期的掛載鉤子是OnMounted，需要引入才能使用
vue3引入了tree-shaking,以模組的方式引入api,減少打包體積

vuex

vuex的屬性有state\mutations\actions\getters\module
vuex可以用來管理資料 vuex也可以實現元件間的傳值 
mutation中的方法按照規定最好不要涉及非同步的方法

vue使用虛擬DOM的特點

Virtual DOM是以JavaScript物件為基礎而不依賴真實平臺環境，所以使它具有了跨平臺的能力，比如說瀏覽器平臺、Weex、Node等
虛擬節點可以李嬌兒成節點描述物件，他描述了因該怎麼樣去建立真實的DOM節點
虛擬DOM優勢：渲染引擎操作DOM慢，JS執行效率高，於是將DOM對比操作放在JS層，提高了效率
提升渲染效能Virtual DOM的優勢不在於單次的操作，而是在大量、頻繁的資料更新下，能夠對檢視進行合理、高效的更新

webpack配置

module.rules可以指定多個loader，而loader的作用是對模組的原始碼進行轉換
plugin是一個具有apply方法的javascript物件，由於plugin可以攜帶引數，所以必須在配置中向plugins屬性傳入一個例項
模組熱替換會在程式執行中，替換、新增、刪除模組，無需重新載入整個頁面，無需更替所有模組。
webpack開始處理程式時，從入口開始遞迴構建一個依賴關係圖，包含了程式所需的模組，然後大包圍少量的bundle，通常只有一個bundle

自定義指令的鉤子函式

自定義指令鉤子函式引數“el”指所繫結的元素，可以直接操作DOM元素。如修改繫結元素的字型顏色：el.style.color='red'
被繫結元素插入父節點時呼叫inserted函式 
bind函式只調用一次，指令第一次繫結到元素時呼叫
元件的Vnode更新時呼叫update函式

vue中，哪個選項對陣列的操作不會觸發檢視的更新

concat()返回一個新的陣列，還需要用新陣列替換原陣列才能實現檢視的更新 

keep-alive可以同include屬性，匹配要進行快取的元件
當元件在keep-alive內被切換，它的activated和deactivated這兩個生命週期鉤子函式將會被對應執行
keep-alive自身不會渲染一個DOM元素，也不會出現在元件的父元件鏈中 
max屬性控制最多可以快取多少元件例項，一旦這個數字達到了，在新勢力被建立之前，已快取元件中最久沒有被訪問的例項會被銷燬掉

Vue 的父元件和子元件生命週期鉤子執行順序是什麼

父元件；beforeCreate->created->beforeMount
子元件：->beforeCreate->created->beforeMount->mounted
父元件：->mounted   從外到內， 再從內到外