37 questions d'entretien Vue courantes pour améliorer votre réserve de connaissances Vue !

Cet article résume et partage avec vous 37 questions d'entretien Vue courantes, vous aidant à consolider les bases et à améliorer votre réserve de connaissances Vue, il suffit de les mémoriser et le tour est joué !

Recommandations associées : Résumé des questions d'entretien Big Front-end 2022 (Collection)

1. Parlez de votre compréhension de MVVM ?

Relation de cartographie simplifiée, contrôleur caché Basé sur MVC, MVVM masque la couche de contrôle.

Vue n'est pas un framework MVVM, c'est un framework de couche de vue. [Recommandations associées : Tutoriel vidéo vue.js]

ViewModal est un pont qui associe les données aux vues.

2. Parlez de votre compréhension des données réactives dans Vue ?

Lorsque les valeurs des types de tableau et d'objet changent, utilisez la méthode defineReactive et utilisez defineProperty pour ajouter getter et setter . Les utilisateurs peuvent effectuer certaines opérations lors de l'obtention et de la définition de valeurs. defineReactive方法，借助了defineProperty，将所有的属性添加了getter和setter。用户在取值和设置的时候，可以进行一些操作。

缺陷：只能监控最外层的属性，如果是多层的，就要进行全量递归。

get里面会做依赖搜集（dep[watcher, watcher]） set里面会做数据更新（notify，通知watcher更新）

三、Vue中如何检测数组的变化？

vue中对数组没有进行defineProperty，而是重写了数组的7个方法。 分别是：

• push
• shift
• pop
• splice
• unshift
• sort
• reverse

因为这些方法都会改变数组本身。

数组里的索引和长度是无法被监控的。

四、Vue中如何进行依赖收集的？

Vue初始化的时候，挂载之后会进行编译。生成renderFunction。

当取值的时候，就会搜集watcher，放到dep里面。

当用户更改值的时候，就会通知watcher，去更新视图。

五、如何理解Vue中的模板编译原理？

这个问题的核心是如何将template转换成render函数。

1. 将template模块转换成ast语法书 - parserHTML
2. 对静态语法做标记（某些节点不改变）
3. 重新生成代码 - codeGen,使用with语法包裹字符串

六、Vue生命周期钩子是如何实现的?

Vue的生命周期钩子是回调函数，当创建组件实例的过程中会调用相应的钩子方法。 内部会对钩子进行处理，将钩子函数维护成数组的形式。

七、Vue组件生命周期有哪些？

• beforeCreate 在实例初始化之后，数据观测observer 和event、watcher事件配置之前被调用
• created 实例已经创建完成，在这一步，以下配置被完成
  • 数据观测
  • 属性和方法的运算
  • watch/event时间回调
  • $el尚未生成
• beforeMount 在挂载之前被调用，render尚未被调用
• mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用
• beforeUpdate 数据更新时，被调用，发生在虚拟Dom重新渲染和打补丁之前
• update 由于数据更改导致的虚拟Dom重新渲染和打补丁，在这之后调用
• beforeDestroy 实例销毁之前调用
• destroyed 实例销毁之后调用，调用后Vue实例的所有东西都会被解绑，所有的事件监听会被移除，子实例被销毁，该钩子在服务端渲染期间不被调用
• keep-alive（activated & deactivated）

八、vue.mixin的使用场景和原理?

Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。 如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。

缺点：命名冲突、数据来源不清晰

九、Vue的组件data为什么必须是一个函数?

new Vue

Défaut : seuls les attributs les plus externes peuvent être surveillés. S'il est multicouche, une récursivité complète est requise.

Get fera la collection de dépendances (dep[watcher, watcher]) Les mises à jour des données seront effectuées dans l'ensemble (notifier, informer l'observateur des mises à jour)

3 Comment détecter les changements dans les tableaux dans Vue ? 🎜Vue ne définit pas de propriété pour les tableaux, mais réécrit 7 méthodes de tableaux. Ce sont : 🎜

• push
• shift
• pop
• splice
• unshift
• sort
• reverse

🎜Parce que ces méthodes modifieront le tableau lui-même. 🎜🎜L'index et la longueur du tableau ne peuvent pas être surveillés. 🎜

4. Comment collecter les dépendances dans Vue ? 🎜🎜🎜🎜Vue Lors de l'initialisation, la compilation sera effectuée après le montage. Générez une fonction de rendu. 🎜🎜Lorsque la valeur est obtenue, le veilleur sera récupéré et placé en dépôt. 🎜🎜Lorsque l'utilisateur modifie la valeur, l'observateur sera averti pour mettre à jour la vue. 🎜

5. Comment comprendre le principe de compilation de modèles dans Vue ? 🎜🎜Le cœur de ce problème est de savoir comment convertir un modèle en fonction de rendu. 🎜

1. Convertir le module modèle en un livre de grammaire ast - parserHTML
2. Marquer la grammaire statique (certains nœuds ne changent pas)
3. Régénérer le code - codeGen, utiliser avec une syntaxe pour envelopper les chaînes

6. Comment le hook de cycle de vie de Vue est-il implémenté 🎜🎜Le hook de cycle de vie de Vue est une fonction de rappel lorsqu'un composant. est créé La méthode hook correspondante sera appelée lors de l'instance. Le hook sera traité en interne et la fonction hook sera maintenue sous la forme d'un tableau. 🎜

7. Quels sont les cycles de vie des composants Vue ? 🎜

• beforeCreate est appelé après l'initialisation de l'instance, avant la création de l'observateur d'observation des données et de la configuration de l'événement et de l'observateur
• créé. L'instance a été créée. À cette étape, la configuration suivante est terminée.
  Observation des données
• Fonctionnement des propriétés et des méthodes
• Rappel de l'heure de la montre/de l'événement
• $el n'a pas encore été généré

beforeMount est appelé avant le montage, le rendu n'a pas encore été appelé

l'el monté est remplacé par le vm.$el nouvellement créé et est appelé après le montage sur l'instance

beforeUpdate est appelé lorsque les données sont mises à jour et se produit avant que le Dom virtuel ne soit restitué et corrigé.

update est appelé après que le Dom virtuel soit restitué et corrigé en raison de data changes

beforeDestroy est appelé avant la destruction de l'instance

destroyed est appelé après la destruction de l'instance. Après l'appel, tout dans l'instance Vue sera indépendant, tous les écouteurs d'événements le seront. sera supprimé et la sous-instance sera détruite. Ce hook est rendu côté serveur Non appelé pendant la période

keep-alive (activé et désactivé)

8. Scénarios d'utilisation et principes de vue.mixin ? 🎜🎜La fonction du mixin de Vue est d'abstraire la logique métier publique. Le principe est similaire à l'héritage d'objet. la méthode mergeOptions sera appelée pour fusionner et le mode stratégie est utilisé pour fusionner différents attributs. Si les données mélangées sont en conflit avec les données du composant propre, les données propres prévaudront. 🎜🎜Inconvénients : conflit de noms, source de données peu claire🎜

9. Pourquoi les données des composants de Vue doivent-elles être une fonction 🎜🎜new Vue est une fonction unique ? En mode exemple, il n'y aura aucune opération de fusion, donc l'instance racine n'a pas besoin de vérifier que les données doivent être une fonction. Les données du composant doivent être une fonction pour éviter que les données des deux composants ne soient contaminées. S'il s'agit tous d'objets, ils pointeront vers la même adresse lors de la fusion. Et s'il s'agit d'une fonction, deux espaces seront générés lorsqu'ils seront appelés lors de la fusion. 🎜🎜10. Veuillez expliquer le principe de nextTick. 🎜🎜nextTick est une microtâche. 🎜

• Le rappel dans nextTick est un rappel retardé exécuté après la fin du prochain cycle de mise à jour du Dom
• peut être utilisé pour obtenir le Dom mis à jour
• La mise à jour des données dans Vue est asynchrone. est mis à jour après la mise à jour

11. Quelle est la différence entre calculé et regardé ?

• Le calcul et la surveillance sont implémentés en fonction de l'observateur.
• les attributs calculés sont mis en cache et les valeurs dépendantes ne changent pas. Lors de la prise de valeurs, la méthode d'attribut calculée ne sera pas exécutée à plusieurs reprises.
• watch surveille les changements de valeurs, la fonction de rappel sera appelée.

12. Comment la méthode Vue.set est-elle implémentée ?

• vue ajoute l'attribut dep à la fois à l'objet et au tableau lui-même
• Lors de l'ajout d'un attribut inexistant à l'objet, l'observateur dont dépend l'objet sera déclenché pour se mettre à jour
• Lorsque l'index du tableau est modifié, le tableau lui-même est appelé La méthode splice pour mettre à jour le tableau

13. Pourquoi Vue utilise-t-il Virtual Dom ? Virtual Dom utilise des objets js pour décrire le vrai Dom, qui est une abstraction du vrai Dom en raison des faibles performances de. exploitant directement Dom, mais la couche js L'efficacité opérationnelle est élevée et elle peut convertir les opérations Dom en opérations objet. Enfin, la différence est mise à jour via l'algorithme diff pour mettre à jour le Dom

Le Dom virtuel ne dépend pas de l'environnement réel de la plateforme et peut être multiplateforme
• 14 Quel est le principe de l'algorithme diff de Vue ?
• L'algorithme diff de Vue est une comparaison plate et ne prend pas en compte les comparaisons entre niveaux. En interne, la méthode récursive profonde + la méthode du double pointeur est utilisée pour la comparaison

Comparez d'abord si les deux nœuds sont le même nœud

Comparez les attributs du même nœud, réutilisez l'ancien nœud

Comparez d'abord le nœud fils, considérez le situation de l'ancien nœud et du fils du nouveau nœud
• Comparaison d'optimisation : tête-à-tête, queue-à-queue, tête-à-queue, queue-à-tête
• Recherche de comparaison et réutilisation
• 15 Puisque Vue peut détecter avec précision les modifications de données via le détournement de données, pourquoi devons-nous effectuer une comparaison pour détecter les différences ?
• Changements de données réactifs, Vue peut en effet savoir quand les données changent, le système réactif peut le savoir immédiatement. Mais si un observateur est ajouté à chaque attribut, les performances seront très médiocres.

Une granularité trop fine entraînera des mises à jour inexactes

• L'algorithme watcher + Diff est donc utilisé pour détecter les différences.
• 16. Veuillez expliquer la fonction et le principe de la clé

Dans le processus de patch de Vue, vous pouvez utiliser la clé pour déterminer si deux nœuds virtuels sont le même nœud.

Aucune clé ne causera de problèmes lors de la mise à jour

Essayez de ne pas utiliser l'index comme clé
• Dix-sept Parlez de la compréhension des composants

Le développement basé sur les composants peut considérablement améliorer l'efficacité et la testabilité du développement d'applications

.

Technologies de composantisation couramment utilisées : propriétés, événements personnalisés, emplacements

Réduire la portée de la mise à jour, la valeur restitue les composants modifiés
• Cohésion élevée, faible couplage, flux de données unidirectionnel
• Dix-huit, veuillez décrire le processus de rendu du composant
• Générer le nœud virtuel du composant-> Créer le nœud réel du composant-> Insérer dans la page

19 Veuillez décrire le processus de mise à jour du composant

La mise à jour de l'attribut déclenchera la méthode patchVnode, composant Le nœud virtuel appellera le hook prepatch, puis mettra à jour les propriétés et mettra à jour le composant.

20. Principe des composants asynchrones

Rendez d'abord le nœud d'espace réservé asynchrone -> Une fois le composant chargé, appelez forceUpdate pour forcer la mise à jour.

21. Avantages et principes des composants fonctionnels

Caractéristiques des composants fonctionnels : apatride, pas de cycle de vie, non ça. Les performances seront donc un peu plus élevées.

Un composant normal est une classe qui hérite de Vue.

• Le composant fonctionnel est une fonction ordinaire.

22. Quelles sont les manières de transmettre des valeurs dans les composants ?

1. props et $emit : Le composant parent transmet les données au composant enfant via prop. Le composant enfant transmet les données au composant parent via$r
e
2. nt$parent,pa$nt
r
3. s et $attrs\; eta\text{t}$sLa fonction principale est de transférer des données par lots.
provide/inject est plus adapté à une application dans des plug-ins, principalement pour réaliser un transfert de données entre niveaux.
4. Vingt-quatre, lequel a la priorité la plus élevée, v-for ou v-if ?
5. Tout d’abord, v-for et v-if ne peuvent pas être utilisés dans la même balise.
6. Traitez d'abord v-for, puis v-if.

7. Si vous les rencontrez en même temps, vous devriez d'abord envisager d'utiliser des attributs calculés pour traiter les données, puis effectuer v-for pour réduire le nombre de boucles.

   25. Comment le mode V est-il implémenté ?

   Le modèle V utilisé sur les composants est un modèle et un rappel

   

   L'utilisation du modèle V sur des éléments ordinaires générera des instructions, et peut également être générée en raison de différents éléments :

   • générer une valeur et une entrée
   • Quand le changement et la radio
   • ont généré du changement et vérifié

   

   les instructions seront appelées ?

   

   Code source :

   

   26. La différence entre l'emplacement normal de Vue et l'emplacement de portée

   L'emplacement normal

   L'emplacement normal est le travail de remplacement après le rendu. Une fois le composant parent rendu, remplacez le contenu du composant enfant.

   

   Lors de la compilation du modèle, traitez les nœuds enfants et les balises slot dans le composant

   

   Lors de la création de l'élément, utilisez la méthode _t() pour remplacer le contenu de _v().

   

   Scope slot

   L'emplacement de portée peut obtenir les propriétés du sous-composant. Transmettez les propriétés dans le composant enfant et restituez-le.

   

   

   Résultat de la compilation du slot de scope :

   

   

   28. Que fait Vue.use ? La méthode

   Vue.use是用来使用插件的。我们可以在插件中扩展全局组件、指令、原型方法等。 会调用install passe par défaut dans la fonction de construction Vue. Vous pouvez utiliser vue dans le plug-in sans compter sur la bibliothèque vue

   

   29. Quels sont les avantages d'écrire un nom de composant ?

   • L'ajout de l'attribut name ajoutera le composant lui-même à l'attribut composants pour implémenter l'appel récursif du composant.
   • peut représenter le nom spécifique du composant pour faciliter le débogage et la recherche du composant correspondant.

   Trente, quels sont les modificateurs de vue ?

   • .stop
   • .prevent
   • .capture
   • .self
   • .once
   • .passive
   • .right
   • .center
   • .middle
   • .alt

   3 1. Comment comprendre la coutume instructions?

   • Lors de la génération d'un arbre de syntaxe ast, lorsqu'une instruction est rencontrée, l'attribut directives sera ajouté à l'élément actuel
   • Le code d'instruction est généré via genDirectives
   • Avant d'appliquer le correctif, extrayez le hook de l'instruction dans cbs et appelez le hook correspondant pendant le processus de patch
   • Lors de l'exécution du hook correspondant à cbs, la méthode de définition d'instruction correspondante est appelée

   32 Où le keep-alive est-il généralement utilisé ? Quel est le principe ?

   • Lors de l'utilisation de keep-alive pour envelopper des composants dynamiques, les composants seront mis en cache pour éviter la recréation des composants

   Il existe deux scénarios d'utilisation, l'un concerne les composants dynamiques et l'autre la vue du routeur

   

   Voici une liste blanche et une liste noire créées. Indique ce qui doit être mis en cache et ce qui ne doit pas l'être. Et le nombre maximum de caches.

   

   Ce qui est mis en cache est l'instance du composant, qui est enregistrée avec les objets clé et valeur.

   Lors du chargement, surveillez l'inclusion et l'exclusion.

   

   Si la mise en cache n'est pas requise, renvoyez directement le nœud virtuel.

   Si vous avez besoin de mettre en cache, utilisez l'identifiant et le nom de la balise du composant pour générer une clé, utilisez l'instance du nœud virtuel actuel comme valeur et enregistrez-la en tant qu'objet. Ceci est la liste des caches

   Si le nombre maximum de caches est défini, supprimez le 0ème cache. Ajoutez le dernier cache.

   Et ajoutez une variable keepAlive au composant pour qu'elle soit vraie. Lorsque le composant est initialisé, il ne sera plus initialisé.

   33. Combien de fonctions de hook possède vue-router ? Comment se déroule le processus d’exécution ?

   Il existe trois types de fonctions de crochet :

   • Global guard
   • Route guard
   • Component guard

   

   34. La différence entre les deux modes de vuerouter

   • Il existe trois modes dans vue-router , à savoir hash, history, abstract
   • abstract est utilisé lors du changement de scène de l'API qui ne prend pas en charge le navigateur
   • le mode hash a une bonne compatibilité, mais n'est pas beau et n'est pas propice au référencement
   • l'histoire est belle, historyAPI +popState, mais l'actualisation provoquera 404

   35. Quelles sont les optimisations de performances de Vue ?

   • Ne définissez pas le niveau de données trop profondément, configurez des données réactives de manière raisonnable
   • Lors de l'utilisation des données, mettez en cache le résultat de la valeur et ne prenez pas la valeur fréquemment
   • Définissez la clé de manière raisonnable
   • v-show (hautes performances de commutation fréquente) et v-if Utilisation raisonnable
   • Contrôler la granularité des composants-> Vue utilise des mises à jour au niveau des composants
   • Utilisation de composants fonctionnels-> Avec l'aide de la stratégie de sous-traitance de Webpack
   • Utilisez keep -alive pour mettre en cache les composants
   • Défilement virtuel, découpage du temps et autres stratégies
   • Optimisation du packaging
   • 36.

   Vuex est un système global de gestion d'état spécialement fourni pour Vue, utilisé pour le partage de données et la mise en cache de données dans plusieurs composants.

   Problème : Impossible de persister.

   

   la mutation modifie principalement l'état et l'exécute de manière synchrone
   • action exécute le code métier pour faciliter la réutilisation, et la logique peut être asynchrone. Le statut n'est pas modifiable directement.
   • 37. Quels modèles de conception sont utilisés dans vue ?
   Mode cas unique : nouveau plusieurs fois, une seule instance

   

   Mode usine : Vous pouvez créer une instance (création de nœud virtuel) en passant des paramètres
   • Mode publication et abonnement : eventBus
   • Observateur mode : watch et dep
   • Mode proxy : _attribut de données, proxy, anti-shake, throttling
   • Mode intermédiaire : vuex
   • Mode stratégie
   • Mode apparence
   Adresse originale : https://juejin.cn/post / 7043074656047202334

   Auteur : Hai Mingyue

   (Partage de vidéos d'apprentissage :

   web front-end

   )