看看這3道必問面試題，檢驗你的Vue掌握程度！

這篇文章為大家整理分享3道Vue必問面試題，檢驗一下大家對Vue的掌握程度，看看你是否都能答對！

問題1: v-show 與 v-if 有什麼不同？

此題屬於檢視面試者的Vue基礎狀況，一般只要用過Vue一定會用到v-show 與 v-if。 （學習影片分享：vue影片教學）

v-if 指令用於條件性地渲染一塊內容，而v-show也用於條件性展示元素。

使用v-show的元素會被渲染並保留在 DOM 中，並使用CSS的display來控制元素的顯示和隱藏。 v-show 不支援 <template></template> 元素，也不支援 v-else。

使用v-if 是「真正」的條件渲染，元素的事件監聽器和子元件都會被銷毀和重建。 v-if 也是惰性的，如果初始條件為false，則並不會渲染，直到變成true才會觸發第一次渲染。而v-show不管條件是什麼都會渲染，並根據display屬性來控制顯示隱藏。

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

問題2：v-model 的原理？

v-model指令主要用來在<input>、<select></select>、<textarea></textarea>表單元素或元件上來實作資料的雙向綁定。他並沒有多神奇，只是監聽了使用者的輸入事件來更新資料。

v-model會根據不同的元素來觸發不同的事件：

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

拿input表單舉例：

<input>

<!-- 等价于 -->

<input>

如果在自訂元件中：

<!-- 父组件： -->
<modelchild></modelchild>

<!-- 子组件： -->
<template>
  <div>{{value}}</div>
</template>

<script>
  export default {
    props:{
      value: String
    },
    methods: {
      test1(){
         this.$emit(&#39;input&#39;, &#39;小红&#39;)
      },
    },
  }
</script>

在父元件中，修改message的值，子元件內的props的value欄位就會自動更改，在子元件內觸發input事件，那麼父元件中的message值也會被更改。

問題3：Vue 元件間通訊有哪幾種方式？

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

• props / $emit 適合父子元件間通訊

  • 這也是Vue最基礎的資料通訊方式，如果這都不知道，那就沒法往後聊了。

• ref 與$parent / $children 適合父子元件間通訊

  • ref如果用在元件上，可以拿到元件的實例對象，進行操作資料
  • $parent / $children：也可以存取父/子實例對象，進行資料操作

• #EventBus （$emit / $on）  適合父子、爺孫、兄弟元件通訊

  • 這種方法是透過場景一個空的Vue實例來作為事件中心，用它來觸發事件和監聽事件，從而實現任何元件間的通訊。
  • 使用EventBus這種方式有很多弊端，不建議大家在專案中去使用，知道這種實作思維就可以。

• $attrs/$listeners# 適合爺爺元件通訊

  • $attrs：包含父作用域中不作為元件props和自訂事件的屬性綁定和事件，並且可以透過v-bind="$attrs" 傳入內部組件。
  • $listeners：包含父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以透過 v-on="$listeners" 傳入內部元件。 注意：在 Vue 3 中已移除。事件監聽器現在是 $attrs 的一部份。

• provide / inject 適合爺爺元件通訊

  • 在爺爺元件上透過provide來提供變量，然後在孫子組件中透過inject 來注入變量。

• Vuex 適合 父子、爺孫、兄弟元件通訊

  • Vuex是專門用來解決Vue應用程式中的狀態管理問題。

（學習影片分享：web前端開發、程式設計基礎影片）

以上是看看這3道必問面試題，檢驗你的Vue掌握程度！的詳細內容。更多資訊請關注PHP中文網其他相關文章！