Vue高频面试问题（含答案），面试官直呼好家伙~
高質量文章都會首發于：CSDN大前端交流社區?https://bbs.csdn.net/forums/WebLSR
誠心邀請各位小伙伴加入，快來跟前端人一起交流學習吧，致力營造成資源共享型社區。
目錄
?1、vue常見指令
2、v-if 和 v-show 有什么區別？
3.組件中 data 為什么是一個函數？
4.Vue 組件間通信有哪幾種方式？
5、computed 和 watch 的區別和運用的場景？
6、vue-router 路由模式有幾種？
7、delete和Vue.delete刪除數組的區別
8、key主要是解決哪一類的問題，為什么不建議用索引index（重繪）
9、如何獲取傳過來的動態參數？
10、vue- router有哪幾種導航鉤子？
11、請詳細說明你對Vue.js生命周期的理解
12、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？
13、在vue.js中如何綁定事件？
14、如何在v-for 循環中實現v-model 數據的雙向綁定？
最后?
?1、vue常見指令
v-text
v-text主要用來更新textContent，可以等同于JS的text屬性。
這兩者等價：
<span>插值表達式{{msg}}</span>v-html
雙大括號的方式會將數據解釋為純文本，而非HTML。為了輸出真正的HTML，可以用v-html指令。它等同于JS的innerHtml屬性
???這個div的內容將會替換成屬性值rawHtml，直接作為HTML進行渲染。
v-pre
v-pre主要用來跳過這個元素和它的子元素編譯過程。可以用來顯示原始的Mustache標簽。跳過大量沒有指令的節點加快編譯。??
最終僅顯示第二個span的內容
v-cloak
這個指令是用來保持在元素上直到關聯實例結束時進行編譯
在頁面加載時會閃爍（插值閃爍問題），先顯示:
<div>{{message}}</div>然后才會編譯為：
<div>hello world!</div>可以用v-cloak指令解決插值表達式閃爍問題，v-cloak在css中用屬性選擇器設置為display: none;
v-once
v-once關聯的實例，只會渲染一次。之后的重新渲染，實例極其所有的子節點將被視為靜態內容跳過，這可以用于優化更新性能。
上面的例子中，msg,list即使產生改變，也不會重新渲染。
v-if
v-if可以實現條件渲染，Vue會根據表達式的值的真假條件來渲染元素。
如果屬性值ok為true，則顯示。否則，不會渲染這個元素。
v-else
v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if后面，否則不起作用。
v-else-if
v-else-if充當v-if的else-if塊，可以鏈式的使用多次。可以更加方便的實現switch語句。
v-show
<h1 v-show="ok">hello world</h1>也是用于根據條件展示元素。和v-if不同的是，如果v-if的值是false，則這個元素被銷毀，不在dom中。但是v-show的元素會始終被渲染并保存在dom中，它只是簡單的切換css的dispaly屬性。
注意：v-if有更高的切換開銷
v-show有更高的初始渲染開銷。
因此，如果要非常頻繁的切換，則使用v-show較好；如果在運行時條件不太可能改變，則v-if較好
v-for
用v-for指令根據遍歷數組來進行渲染
注意：當v-for和v-if同處于一個節點時，v-for的優先級比v-if更高。這意味著v-if將運行在每個v-for循環中
v-bind
v-bind用來動態的綁定一個或者多個特性。沒有參數時，可以綁定到一個包含鍵值對的對象。常用于動態綁定class和style。以及href等。
簡寫為一個冒號【?：】
v-model
這個指令用于在表單上創建雙向數據綁定。
v-model會忽略所有表單元素的value、checked、selected特性的初始值。因為它選擇Vue實例數據做為具體的值
這個例子中直接在瀏覽器input中輸入別的名字，下面的p的內容會直接跟著變。這就是雙向數據綁定。
v-on
v-on主要用來監聽dom事件，以便執行一些代碼塊。表達式可以是一個方法名。
2、v-if 和 v-show 有什么區別？
共同點：v-if 和 v-show 都能實現元素的顯示隱藏
區別：
3.組件中 data 為什么是一個函數？
為什么組件中的 data 必須是一個函數，然后 return 一個對象，而 new Vue 實例里，data 可以直接是一個對象？
// datadata() {return {message: "子組件",childName:this.name}}// new Vuenew Vue({el: '#app',router,template: '<App/>',components: {App}})因為組件是用來復用的，且 JS 里對象是引用關系，如果組件中 data 是一個對象，那么這樣作用域沒有隔離，子組件中的 data 屬性值會相互影響，如果組件中 data 選項是一個函數，那么每個實例可以維護一份被返回對象的獨立的拷貝，組件實例之間的 data 屬性值不會互相影響；而 new Vue 的實例，是不會被復用的，因此不存在引用對象的問題。
4.Vue 組件間通信有哪幾種方式？
Vue 組件間通信是面試常考的知識點之一，這題有點類似于開放題，你回答出越多方法當然越加分，表明你對 Vue 掌握的越熟練。Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信，下面我們分別介紹每種通信方式且會說明此種方法可適用于哪類組件間通信。
（1）props / $emit?適用 父子組件通信
這種方法是 Vue 組件的基礎，相信大部分同學耳聞能詳，所以此處就不舉例展開介紹。
（2）ref?與?$parent / $children?適用 父子組件通信
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例
$parent?/?$children：訪問父 / 子實例
（3）EventBus （$emit / $on）?適用于 父子、隔代、兄弟組件通信
這種方法通過一個空的 Vue 實例作為中央事件總線（事件中心），用它來觸發事件和監聽事件，從而實現任何組件間的通信，包括父子、隔代、兄弟組件。
（4）$attrs/$listeners?適用于 隔代組件通信
$attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 ( class 和 style 除外 )。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外 )，并且可以通過?v-bind="$attrs"?傳入內部組件。通常配合 inheritAttrs 選項一起使用。
$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過?v-on="$listeners"?傳入內部組件
（5）provide / inject?適用于 隔代組件通信
祖先組件中通過 provider 來提供變量，然后在子孫組件中通過 inject 來注入變量。 provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間建立了一種主動提供與依賴注入的關系。
（6）Vuex 適用于 父子、隔代、兄弟組件通信
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含著你的應用中大部分的狀態 ( state )。
Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化。
5、computed 和 watch 的區別和運用的場景？
computed：?是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；
watch：?更多的是「觀察」的作用，類似于某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行后續操作；
運用場景：
當我們需要進行數值計算，并且依賴于其它數據時，應該使用 computed，因為可以利用 computed 的緩存特性，避免每次獲取值時，都要重新計算；
當我們需要在數據變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行異步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。
6、vue-router 路由模式有幾種？
Hash:? 使用URL的hash值來作為路由。支持所有瀏覽器。
History:? 以來HTML5 History API 和服務器配置。
Abstract：支持所有javascript運行模式。如果發現沒有瀏覽器的API，路由會自動強制進入這個模式。
7、delete和Vue.delete刪除數組的區別
delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete直接刪除了數組 改變了數組的鍵值。
8、key主要是解決哪一類的問題，為什么不建議用索引index（重繪）
（1）key的作用主要是為了高效的更新虛擬DOM
（2）當以index為key值時，如果數組長度發生變化，會導致key的變化，比如刪除其中某一項，那么index會相應變化。
所以用index作為key和不加index沒有什么區別，都不能提升性能。一般用每項數據的唯一值來作為key，就算數組長度變化，也不會影響到這個key
9、如何獲取傳過來的動態參數？
在組件中，使用$router對象的 params.id，即 $route.params.id 。
10、vue- router有哪幾種導航鉤子？
有3種。
第一種是全局導航鉤子：router.beforeEach(to,from,next)。作用是跳轉前進行判斷攔截。
第二種是組件內的鉤子。
第三種是單獨路由獨享組件。
11、請詳細說明你對Vue.js生命周期的理解
總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
beforeCreate：在實例初始化之后，數據觀測者（ data observer）和 event/ watcher事件配置之前調用。
created：在實例創建完成后立即調用。在這一步，實例已完成以下的配置：數據觀測者，屬性和方法的運算， watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。
beforeMount：在掛載開始之前調用，相關的 render函數首次調用。
mounted:? el被新創建的vm.$el替換，并且在掛載到實例上之后再調用該鉤子如果root實例掛載了一個文檔內元素，當調用 mounted時vm.sel也在文檔內。
beforeUpdate：在數據更新時調用，發生在虛擬DOM重新渲染和打補丁之前。
updated：由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤。
beforeDestroy：在實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed：在 Vue. js實例銷毀后調用。調用后，Vue. js實例指示的所有東西都會解除綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
當使用組件的kep- alive功能時，增加以下兩個周期。
activated在keep- alive組件激活時調用；
deactivated在keep-live組件停用時調用。
12、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？
具體步驟如下。
（1）在 components目錄中新建組件文件，腳本一定要導出暴露的接口。
（2）導入需要用到的頁面（組件）。
（3）將導入的組件注入uejs的子組件的 components屬性中。
（4）在 template的視圖中使用自定義組件。
13、在vue.js中如何綁定事件？
通過在v-on后跟事件名稱=“事件回調函數( )”的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=“事件回調函數( )”。
14、如何在v-for 循環中實現v-model 數據的雙向綁定？
有時候需要循環創建input，并用v- model實現數據的雙向綁定。此時可以為v- model綁定數組的一個成員 selected [$ index]，這樣就可以給不同的 input綁定不同的v- model，從而分別操作它們。
<div v-for= " ( item, index ) in arr"><input type= "text "? v-model="arr [index ] "><h1> { { arr [index ] } } </h1></div>最后?
如果對您有幫助，希望能給個👍評論/收藏/三連！
博主為人老實，無償解答問題哦?
總結
以上是生活随笔為你收集整理的Vue高频面试问题（含答案），面试官直呼好家伙~的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cocos2dx-js 初探 整体流程h
- 下一篇： vue项目实现会议预约（包含某天的某个时