Schauen Sie sich diese 3 Fragen an, die Sie im Vorstellungsgespräch unbedingt stellen müssen, um Ihre Vue-Kenntnisse zu testen!

In diesem Artikel stellen wir Ihnen 3 Fragen vor, die Sie im Vorstellungsgespräch unbedingt stellen müssen, um zu testen, ob Sie Vue beherrschen und ob Sie sie richtig beantworten können!

Frage 1: Was ist der Unterschied zwischen v-show und v-if? Diese Frage dient dazu, die Vue-Grundlagen des Interviewers zu untersuchen. Im Allgemeinen wird jeder, der Vue verwendet hat, auf jeden Fall V-Show und V-If verwenden. (Teilen von Lernvideos:

Vue-Video-Tutorial

) Der Befehl v-if wird zum bedingten Rendern eines Inhalts verwendet, und v-show wird auch für die bedingte Darstellung verwendet Anzeigeelement.

Elemente, die v-show verwenden, werden im DOM gerendert und beibehalten, und CSS-Anzeige wird verwendet, um das Anzeigen und Ausblenden der Elemente zu steuern. v-show unterstützt weder das Element <template> noch v-else. 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=&#39;something&#39;>

<!-- 等价于 -->

<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 / injectWenn v-if das bedingte Rendering „true“ ist, werden die Ereignis-Listener und Unterkomponenten des Elements zerstört und neu erstellt. v-if ist auch

  faul
  Wenn die Anfangsbedingung falsch ist, wird sie nicht gerendert und das erste Rendering wird nicht ausgelöst, bis sie wahr wird. Und v-show rendert unabhängig von den Bedingungen und steuert die Anzeige und das Ausblenden entsprechend dem Anzeigeattribut.
  • Im Allgemeinen hat v-if einen größeren Umschaltaufwand, während v-show nur den anfänglichen Rendering-Aufwand verursacht. Wenn das Element häufig gewechselt werden muss, verwenden Sie v-show. Wenn sich die Bedingungen selten ändern, ist es besser, v- zu verwenden. Wenn.

• Frage 2: Was ist das Prinzip des V-Modells?
  Der Befehl v-model wird hauptsächlich in <input>, <select>, <textarea> verwendet. Auf Formularelementen oder Komponenten, um eine bidirektionale Datenbindung zu erreichen. Es ist nicht so magisch, es lauscht einfach auf die Eingabeereignisse des Benutzers, um die Daten zu aktualisieren. 🎜🎜V-Modell löst verschiedene Ereignisse basierend auf verschiedenen Elementen aus: 🎜🎜🎜Text- und Textbereichselemente verwenden das input-Ereignis; ; 🎜🎜🎜 Nehmen Sie das Eingabeformular als Beispiel: 🎜rrreee🎜 Wenn in einer benutzerdefinierten Komponente: 🎜rrreee🎜 Ändern Sie in der übergeordneten Komponente den Wert der Nachricht, das Wertefeld der Requisiten in der untergeordneten Komponente ändert sich automatisch. in der untergeordneten Komponente Wenn das Eingabeereignis ausgelöst wird, wird auch der Nachrichtenwert in der übergeordneten Komponente geändert. 🎜

  🎜🎜Frage 3: Welche Kommunikationswege gibt es zwischen Vue-Komponenten? 🎜🎜🎜🎜Diese Frage kommt auch in Vorstellungsgesprächen sehr häufig vor. Je mehr Möglichkeiten Sie haben, sie zu beantworten, desto besser beherrschen Sie Vue. Im Allgemeinen wird die Kommunikation zwischen Komponenten grob in drei Typen unterteilt: Kommunikation zwischen Vater und Sohn, Kommunikation zwischen Großvater und Enkel und Kommunikation zwischen Bruder und Komponente: 🎜

  🎜🎜🎜props / $emit🎜 Geeignet für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten🎜🎜🎜Dies ist auch die grundlegendste Datenkommunikationsmethode von Vue. Wenn Sie das nicht wissen, Sie Ich kann später nicht darüber reden. 🎜🎜🎜🎜🎜🎜ref und $parent / $children🎜 sind für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten geeignet🎜🎜🎜ref Bei Verwendung Bei Komponenten können Sie das Instanzobjekt der Komponente abrufen und die Daten bearbeiten🎜🎜$parent / $children: Sie können auch auf das übergeordnete/untergeordnete Instanzobjekt zugreifen, um es auszuführen Datenoperationen🎜🎜🎜🎜🎜 🎜EventBus ($emit / $on)🎜 Geeignet für die Kommunikation von Vater-Sohn-, Großvater-Enkel- und Bruderkomponenten🎜🎜🎜Diese Methode besteht darin, eine leere Vue-Instanz zu verwenden in der Szene als Ereigniszentrum und nutzen Sie es, um Ereignisse auszulösen und auf Ereignisse zu warten, um die Kommunikation zwischen beliebigen Komponenten zu ermöglichen. 🎜🎜Die Verwendung von EventBus hat viele Nachteile. Es wird nicht jedem empfohlen, es in Projekten zu verwenden. 🎜🎜🎜🎜🎜🎜$attrs/$listeners🎜 Geeignet für die Kommunikation zwischen Großvater und Enkel.🎜🎜🎜$attrs: Enthält Artikel, die nicht im Lieferumfang enthalten sind im übergeordneten Bereich Eigenschaftsbindungen und Ereignisse als Komponenten-Requisiten und benutzerdefinierte Ereignisse und können über v-bind="$attrs" an interne Komponenten übergeben werden. 🎜🎜$listeners: Enthält v-on-Ereignis-Listener (ohne .native-Modifikator) im übergeordneten Bereich. Es kann über v-on="$listeners" an interne Komponenten übergeben werden. 🎜Hinweis: In Vue 3 entfernt. Ereignis-Listener sind jetzt Teil von $attrs🎜. 🎜🎜🎜🎜🎜🎜provide / inject🎜 Geeignet für die Kommunikation zwischen Großvater-Enkel-Komponenten 🎜🎜🎜 Stellen Sie Variablen über „provide“ auf der Großvaterkomponente bereit und fügen Sie dann Variablen über „inject“ in die Enkelkomponente ein. 🎜🎜🎜🎜🎜🎜Vuex eignet sich für die Komponentenkommunikation zwischen Vater und Sohn, Großvater und Enkel und Brüdern🎜🎜
  • Vuex wurde speziell zur Lösung von Zustandsverwaltungsproblemen in Vue-Anwendungen entwickelt.

(Lernvideo-Sharing: Web-Front-End-Entwicklung, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonSchauen Sie sich diese 3 Fragen an, die Sie im Vorstellungsgespräch unbedingt stellen müssen, um Ihre Vue-Kenntnisse zu testen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!