Découvrez ces 3 questions d'entretien incontournables pour tester votre maîtrise de Vue !

Cet article partagera avec vous 3 Vuequestions d'entretien incontournables pour tester votre maîtrise de Vue et voir si vous pouvez y répondre correctement !

Question 1 : Quelle est la différence entre v-show et v-if ?

Cette question vise à examiner les bases de Vue de l'intervieweur. De manière générale, toute personne ayant utilisé Vue utilisera certainement v-show et v-if. (Partage vidéo d'apprentissage : tutoriel vidéo vue)

La commande v-if est utilisée pour restituer conditionnellement un élément de contenu, et v-show est également utilisée pour le rendu conditionnel. élément d'affichage. 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 / injectLes éléments utilisant v-show seront rendus et conservés dans le DOM, et l'affichage CSS sera utilisé pour contrôler l'affichage et le masquage des éléments. v-show ne prend pas en charge l'élément <template>, ni v-else.

  L'utilisation de v-if est un "vrai" rendu conditionnel, les écouteurs d'événements et les sous-composants de l'élément seront détruits et reconstruits. v-if est également
  • paresseux
  Si la condition initiale est fausse, elle ne sera pas rendue et le premier rendu ne sera pas déclenché tant qu'elle ne deviendra pas vraie. Et v-show effectuera le rendu quelles que soient les conditions et contrôlera l'affichage et le masquage en fonction de l'attribut d'affichage.
De manière générale, v-if a une surcharge de commutation plus importante, tandis que v-show n'a qu'une surcharge de rendu initiale. Si l'élément doit être changé fréquemment, utilisez v-show. Si les conditions changent rarement, il est préférable d'utiliser v-. si.

• Question 2 : Quel est le principe du v-model ?

  🎜🎜La commande v-model est principalement utilisée dans <input>, <select>, <textarea> Sur les éléments ou composants de formulaire pour réaliser une liaison bidirectionnelle des données. Ce n'est pas si magique, il écoute simplement les événements d'entrée de l'utilisateur pour mettre à jour les données. 🎜🎜v-model déclenchera différents événements en fonction de différents éléments : 🎜🎜🎜les éléments text et textarea utilisent l'événement input 🎜🎜checkbox / radio et sélectionnez utiliser l'événement change ; ; 🎜🎜🎜Prenons comme exemple le formulaire de saisie : 🎜rrreee🎜Si dans un composant personnalisé : 🎜rrreee🎜Dans le composant parent, modifiez la valeur du message, le champ valeur des props dans le composant enfant changera automatiquement, dans le composant enfant Lorsque l'événement d'entrée est déclenché, la valeur du message dans le composant parent sera également modifiée. 🎜

  🎜🎜Question 3 : Quels sont les moyens de communication entre les composants Vue ? 🎜🎜🎜🎜Cette question est également une question très courante dans les entretiens. Plus vous pouvez y répondre, plus vous maîtrisez Vue. Généralement, la communication entre les composants est grossièrement divisée en trois types : la communication entre les composants père-fils, la communication entre les composants grand-père-petit-fils et la communication entre les composants frère-composant : 🎜

  🎜🎜🎜props / $emit🎜 Convient à la communication entre les composants parent et enfant🎜🎜🎜C'est également la méthode de communication de données la plus basique de Vue. Si vous ne le savez pas, vous je ne pourrai pas en parler plus tard. 🎜🎜🎜🎜🎜🎜ref et $parent / $children🎜 conviennent à la communication entre les composants parent et enfant🎜🎜🎜ref Si utilisé sur les composants, vous pouvez obtenir l'objet instance du composant et exploiter les données🎜🎜$parent / $children : Vous pouvez également accéder à l'objet instance parent/enfant pour effectuer opérations de données🎜🎜🎜🎜🎜 🎜EventBus ($emit / $on)🎜 Convient à la communication entre composants père-fils, grand-père-petit-fils et frère🎜🎜🎜Cette méthode consiste à utiliser une instance Vue vide dans la scène en tant que centre d'événements et utilisez-le pour déclencher des événements et écouter des événements afin de permettre la communication entre tous les composants. 🎜🎜L'utilisation de EventBus présente de nombreux inconvénients. Il n'est pas recommandé à tout le monde de l'utiliser dans des projets. 🎜🎜🎜🎜🎜🎜$attrs/$listeners🎜 Convient à la communication entre composants grand-père-petit-fils🎜🎜🎜$attrs : contient des éléments non inclus dans la portée parent Liaisons de propriétés et événements en tant qu'accessoires de composant et événements personnalisés, et peuvent être transmis aux composants internes via v-bind="$attrs". 🎜🎜$listeners : contient des écouteurs d'événements v-on (sans modificateur .native) ​​​​dans la portée parent. Il peut être transmis aux composants internes via v-on="$listeners". 🎜Remarque : supprimé dans Vue 3. Les écouteurs d'événements font désormais partie de $attrs🎜. 🎜🎜🎜🎜🎜🎜provide / inject🎜 Convient à la communication entre les composants grand-père et petit-fils 🎜🎜🎜 Fournissez des variables via provide sur le composant grand-père, puis injectez des variables via inject dans le composant petit-enfant. 🎜🎜🎜🎜🎜🎜Vuex convient à la communication composante entre père et fils, grand-père et petit-fils et frères🎜🎜
  • Vuex est spécialement conçu pour résoudre les problèmes de gestion d'état dans les applications Vue.

(Partage de vidéos d'apprentissage : développement web front-end, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!