本篇文章給大家整理分享3道Vue必問(wèn)面試題，檢驗(yàn)一下大家對(duì)Vue的掌握程度，看看你是否都能答對(duì)！

問(wèn)題1: v-show 與 v-if 有什么區(qū)別？

此題屬于考察面試者的Vue基礎(chǔ)情況，一般只要用過(guò)Vue肯定會(huì)用到v-show 與 v-if。（學(xué)習(xí)視頻分享：vue視頻教程）

v-if 指令用于條件性地渲染一塊內(nèi)容，而v-show也用于條件性展示元素。

使用v-show的元素會(huì)被渲染并保留在 DOM 中，并使用CSS的display來(lái)控制元素的顯示和隱藏。v-show 不支持 <template> 元素，也不支持 v-else。

使用v-if 是“真正”的條件渲染，元素的事件監(jiān)聽(tīng)器和子組件都會(huì)被銷毀和重建。v-if 也是惰性的，如果初始條件為false，則并不會(huì)渲染，直到變?yōu)閠rue才會(huì)觸發(fā)第一次渲染。而v-show不管條件是什么都會(huì)渲染，并根據(jù)display屬性來(lái)控制顯示隱藏。

一般來(lái)說(shuō)，v-if的切換開(kāi)銷更大，而v-show只有初始渲染開(kāi)銷，如果元素需要頻繁地切換，使用v-show，如果條件很少改變，則使用v-if更好。

問(wèn)題2：v-model 的原理？

v-model指令主要用來(lái)在<input>、<select>、<textarea>表單元素或者組件上來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。他并沒(méi)有多神奇，只是監(jiān)聽(tīng)了用戶的輸入事件來(lái)對(duì)數(shù)據(jù)進(jìn)行更新。

v-model會(huì)根據(jù)不同的元素來(lái)觸發(fā)不同的事件：

• text 和 textarea 元素使用input 事件；
• checkbox / radio 和 select使用change 事件；

拿input表單舉例：

<input v-model='something'>  <!-- 等價(jià)于 -->  <input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定義組件中：

<!-- 父組件： --> <ModelChild v-model="message"></ModelChild>  <!-- 子組件： --> <template>   <div>{{value}}</div> </template>  <script>   export default {     props:{       value: String     },     methods: {       test1(){          this.$emit('input', '小紅')       },     },   } </script>

在父組件中，修改message的值，子組件內(nèi)的props的value字段就會(huì)自動(dòng)更改，在子組件內(nèi)觸發(fā)input事件，那么父組件中的message值也會(huì)被更改。

問(wèn)題3：Vue 組件間通信有哪幾種方式？

這道題也是面試非常常考的一道題，能答出的方式越多，說(shuō)明對(duì)Vue掌握的越熟練。一般組件間的通信大致分為3種：父子組件通信、爺孫組件通信、兄弟組件通信，下面我們分別來(lái)看：

• props / $emit 適合父子組件間通信

  • 這也是Vue最基礎(chǔ)的數(shù)據(jù)通信方式，如果這都不知道，那就沒(méi)法往后聊了。

• ref 與 $parent / $children 適合父子組件間通信

  • ref如果用在組件上，可以拿到組件的實(shí)例對(duì)象，進(jìn)行操作數(shù)據(jù)
  • $parent / $children：也可以訪問(wèn)父/子實(shí)例對(duì)象，進(jìn)行數(shù)據(jù)操作

• EventBus （$emit / $on） 適合父子、爺孫、兄弟組件通信

  • 這種方法是通過(guò)場(chǎng)景一個(gè)空的Vue實(shí)例來(lái)作為事件中心，用它來(lái)觸發(fā)事件和監(jiān)聽(tīng)事件，從而實(shí)現(xiàn)任何組件間的通信。
  • 使用EventBus這種方式有很多弊端，不建議大家在項(xiàng)目中去使用，知道這種實(shí)現(xiàn)思路就可以。

• $attrs/$listeners 適合爺孫組件通信

  • $attrs：包含父作用域中不作為組件props和自定義事件的屬性綁定和事件，并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件。
  • $listeners：包含父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件。注意：在 Vue 3 中已被移除。事件監(jiān)聽(tīng)器現(xiàn)在是 $attrs 的一部分。

• provide / inject 適合爺孫組件通信

  • 在爺爺組件上通過(guò) provide 來(lái)提供變量，然后在孫子組件中通過(guò) inject 來(lái)注入變量。

• Vuex 適合 父子、爺孫、兄弟組件通信

  • Vuex是專門(mén)用來(lái)解決Vue應(yīng)用程序中的狀態(tài)管理問(wèn)題。

（學(xué)習(xí)視頻分享：web前端開(kāi)發(fā)、編程基礎(chǔ)視頻）