Vue面試題實例分析

這篇“Vue面試題實例分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue面試題實例分析”文章吧。

問題1: v-show 與 v-if 有什么區別？

此題屬于考察面試者的Vue基礎情況，一般只要用過Vue肯定會用到v-show 與 v-if。

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

使用v-show的元素會被渲染并保留在 DOM 中，并使用CSS的display來控制元素的顯示和隱藏。v-show 不支持 <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>、<textarea>表單元素或者組件上來實現數據的雙向綁定。他并沒有多神奇，只是監聽了用戶的輸入事件來對數據進行更新。

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

• text 和 textarea 元素使用input 事件；

• checkbox / radio 和 select使用change 事件；

拿input表單舉例：

<input v-model='something'>

<!-- 等價于 -->

<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的值，子組件內的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應用程序中的狀態管理問題。

以上就是關于“Vue面試題實例分析”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。