Plus de 20 questions d'entretien Vue incontournables (avec analyse des réponses)

Cet article a compilé plus de 20 questions d'entretien Vue à partager avec vous, ainsi qu'une analyse des réponses. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Questions d'entretien connexes recommandées : questions d'entretien vue (2021)]

De l'épaisseur de l'objectif Quand j'ai vu la chemise à carreaux jaune et noire, j'ai réalisé que l'intervieweur assis en face de moi devait être venu avec de mauvaises intentions.

Comme d'habitude, je vais passer 3 minutes à me présenter. Pendant cette période, pour éviter toute gêne, j'ai regardé entre les sourcils de l'intervieweur, mais celui-ci n'était visiblement pas très intéressé par mon expérience. Il m'a interrompu au bout d'une minute et demie.

Dans quelle pile technologique pensez-vous être le meilleur ?

Vue, j'aime beaucoup le premier documentaire de Youda qui vient de sortir récemment, c'est vraiment sympa à regarder.

0. Pouvez-vous parler de MVVM ?

---

MVVM est l'abréviation de Model-View-ViewModel, c'est-à-dire que le MVC dans Controller évolue vers ViewModel. La couche Modèle représente le modèle de données, la Vue représente le composant de l'interface utilisateur et le ViewModel est le pont entre les couches Vue et Modèle. Les données seront liées à la couche viewModel et restitueront automatiquement les données dans la page lorsque la vue change. , la couche viewModel sera informée de mettre à jour les données. (Partage de vidéos d'apprentissage : tutoriel vidéo Vue)

1 Parlez brièvement du principe des données réactives Vue2.x

---

Vue. is Lors de l'initialisation des données, tous les attributs des données seront redéfinis à l'aide de Object.defineProperty Lorsque la page utilise les attributs correspondants, les dépendances seront collectées en premier (collecter watcher du composant actuel si les attributs changent, les dépendances pertinentes). sera averti des opérations de mise à jour ( 发布订阅).

2. Connaissez-vous le principe des données réactives Vue3.x ?

---

(Heureusement, je l'ai lu, ce n'est pas un problème pour moi)

Vue3.x utilise Proxy au lieu de Object.defineProperty. Parce que Proxy peut surveiller directement les modifications des objets et des tableaux et dispose de jusqu'à 13 méthodes d'interception. Et en tant que nouveau standard, il fera l’objet d’une optimisation continue des performances par les fabricants de navigateurs.

Le proxy ne proxy que la première couche de l'objet, alors comment Vue3 résout-il ce problème ?

(très simple)

Déterminez si la valeur de retour actuelle de Reflect.get est Object. Si tel est le cas, utilisez la méthode reactive comme proxy
Cela permet d'obtenir une analyse approfondie. observation .

Lors de la surveillance d'un tableau, get/set peut être déclenché plusieurs fois, alors comment éviter qu'il ne soit déclenché plusieurs fois ?

Nous pouvons déterminer si la clé est l'attribut de la cible actuelle de l'objet proxy lui-même, ou si l'ancienne valeur et la nouvelle valeur sont égales. Ce n'est que lorsque l'une des deux conditions ci-dessus est remplie que le déclencheur peut être. exécuté.

L'intervieweur a levé la tête. Je me suis dit

(Ce type va bien, mieux que les deux précédents, il aurait dû voir plus ou moins le code source de Vue3)

Parlons de vue2. .x à nouveau Comment surveiller les changements de tableau

---

utilise le détournement de fonctions pour réécrire la méthode du tableau. Vue réécrit la chaîne de prototypes du tableau dans les données et pointe vers le prototype de tableau défini par lui-même. . De cette manière, les mises à jour des dépendances peuvent être notifiées lorsque l'API du tableau est appelée. Si le tableau contient des types de référence, les types de référence dans le tableau seront à nouveau parcourus de manière récursive pour la surveillance. Cela permet de surveiller les modifications du tableau.

(Les enquêteurs qui peuvent poser cette question font plus attention à la profondeur, et ces opérations de routine doivent être mémorisées)

(Pour plus de détails sur la chaîne de prototypes, veuillez vous référer à mon autre article Colonne)

Cet article vous aidera à bien comprendre la chaîne de prototypes JavaScript

Connaissez-vous nextTick ? principe de mise en œuvre ?

---

Exécuter un rappel différé après le prochain cycle de mise à jour du DOM. nextTick utilise principalement des macro-tâches et des micro-tâches. En fonction de l'environnement d'exécution, essayez d'utiliser

• Promise
• MutationObserver
• setImmediate
• Si aucune des solutions ci-dessus ne fonctionne, utilisez setTimeout

définit une méthode asynchrone. Appeler nextTick plusieurs fois stockera la méthode dans la file d'attente et effacera la file d'attente actuelle via cette méthode asynchrone.

(Pour plus d'informations sur les macro-tâches, les micro-tâches et les boucles d'événements, veuillez vous référer à mes deux autres colonnes)

(Vous constaterez après avoir vu ceci qu'en fait, demander au framework vous testera finalement vos compétences en JavaScript natif)

• Boucle d'événements JavaScript dans le navigateur

• Node. js boucle d'événement

5. Parlons du cycle de vie de Vue

---

beforeCreate est le premier hook déclenché après le nouveau Vue(). , les données et méthodes sur données, méthodes, calculées et montre ne sont pas accessibles au stade actuel.

createdSe produit après la création de l'instance. L'observation des données est terminée à l'étape actuelle, c'est-à-dire que la modification des données ici ne déclenchera pas la fonction mise à jour. . Vous pouvez effectuer une acquisition de données initiale. Vous ne pouvez pas interagir avec le Dom au stade actuel. Si vous le devez, vous pouvez accéder au Dom via vm.$nextTick.

beforeMount se produit avant le montage, avant lequel le modèle de modèle a été importé dans la fonction de rendu pour compilation. Au stade actuel, le Dom virtuel a été créé et est sur le point de commencer le rendu. Des modifications aux données peuvent également être apportées à ce moment-là, et la mise à jour ne sera pas déclenchée.

mountedSe produit une fois le montage terminé. À l'étape actuelle, le vrai Dom est monté, les données sont liées dans les deux sens, le nœud Dom est accessible et l'attribut $refs est utilisé pour faire fonctionner le Dom.

beforeUpdate se produit avant la mise à jour, c'est-à-dire que les données réactives sont mises à jour et le dom virtuel est déclenché avant le nouveau rendu. Vous pouvez modifier les données dans l'étape en cours sans provoquer de nouveau rendu.

updatedSe produit une fois la mise à jour terminée et le composant Dom de l'étape actuelle a été mis à jour. Veillez à éviter de modifier les données pendant cette période, car cela pourrait entraîner une boucle infinie de mises à jour.

beforeDestroySe produit avant la destruction de l'instance. L'instance peut être entièrement utilisée au stade actuel. Nous pouvons effectuer un travail de finition de post-traitement à ce moment-là, comme effacer le minuteur.

destroyed se produit après la destruction de l'instance. À ce stade, il ne reste que le shell dom. Le composant a été désassemblé, la liaison de données a été supprimée, l'écouteur a été supprimé et toutes les instances enfants ont été détruites.

(Si vous êtes intéressé par l'explication détaillée du cycle de vie de Vue, veuillez vous référer à mon autre chronique)

Interprétez le cycle de vie de Vue à partir du code source pour laisser l'intervieweur comprend Vous êtes impressionné

6. Dans quel cycle de vie se situent généralement vos demandes d'interface ?

---

Les requêtes d'interface sont généralement placées dans mounted, mais il convient de noter que le rendu côté serveur ne prend pas en charge le montage et doit être placé dans created.

7. Parlons de Computed et Watch

---

ComputedEssentiellement, c'est un observateur avec cache, et il sera mis à jour quand la vue des propriétés dépendantes change.
Convient aux scénarios informatiques où les calculs consomment des performances relativement élevées. Lorsque l'expression est trop complexe, mettre trop de logique dans le modèle rendra le modèle difficile à maintenir. Vous pouvez placer la logique complexe dans des propriétés calculées.

Watch Il n'y a pas de mise en cache, il s'agit plutôt d'une fonction d'observation, et vous pouvez surveiller certaines données et exécuter des rappels. Lorsque nous devons surveiller en profondeur les propriétés de l'objet, nous pouvons activer l'option deep：true, afin que chaque élément de l'objet soit surveillé. Cela entraînera des problèmes de performances. Pour l'optimisation, vous pouvez utiliser 字符串形式 pour surveiller. S'il n'est pas écrit dans le composant, n'oubliez pas d'utiliser unWatch手动注销.

8. Parlons de la différence entre v-if et v-show

---

Lorsque la condition n'est pas vraie, v-if ne rendra pas le Élément DOM, v-showL'opération est de style (affichage), commutant l'affichage et masquant le DOM actuel.

9. Pourquoi les données du composant sont-elles une fonction ?

---

Si un composant est réutilisé plusieurs fois, plusieurs instances seront créées. Essentiellement, 这些实例用的都是同一个构造函数. Si les données sont un objet, l'objet est un type référence et affectera toutes les instances. Ainsi, afin de garantir que les données n'entrent pas en conflit entre les différentes instances du composant, les données doivent être une fonction.

10. Parlons du principe du v-model

---

v-model est essentiellement un sucre de syntaxe, qui peut être considéré comme un value + input méthode sucre syntaxique.
peut être personnalisé via les attributs prop et event de l'attribut model. Le modèle V natif générera différents événements et attributs basés sur différentes balises.

11. Parlons du principe de la liaison d'événements Vue

---

La liaison d'événements native est liée aux éléments réels via addEventListener, la liaison d'événements de composants. implémenté via le $on personnalisé de Vue.

Intervieweur : (Les bases de cet enfant sont bonnes, je vais devoir passer au niveau de difficulté ensuite)

Connaissez-vous le principe du modèle Vue. compilation ? Pouvez-vous l'expliquer brièvement ?

---

Pour faire simple, le processus de compilation de Vue est le processus de conversion de template en une fonction render. Il passera par les étapes suivantes :

• Générer l'arbre AST
• Optimiser
• codegen

Analyser d'abord le modèle et générer AST语法树 (Une forme d'objet JavaScript pour décrire l'ensemble du modèle).
Utilisez un grand nombre d'expressions régulières pour analyser le modèle, et lorsque vous rencontrez des étiquettes et du texte, les hooks correspondants seront exécutés pour le traitement associé.

Les données de Vue sont réactives, mais en fait, toutes les données du modèle ne sont pas réactives. Certaines données ne changeront pas après leur premier rendu, et le DOM correspondant ne changera pas non plus. Ensuite, le processus d'optimisation consiste à parcourir profondément l'arbre AST et à marquer les nœuds de l'arbre en fonction des conditions pertinentes. Nous pouvons 跳过对它们的比对 ces nœuds marqués (nœuds statiques), ce qui optimisera grandement le modèle d'exécution.

La dernière étape de la compilation est 将优化后的AST树转换为可执行的代码.

Intervieweur : (Tu es un gars fougueux, tu as quelque chose, la difficulté sera augmentée, si tu n'y crois pas, ce ne sera pas difficile pour toi)

13. Les algorithmes de comparaison des moteurs de rendu Vue2.x et Vue3.x respectivement Permettez-moi de parler de

---

Simplement parlant, l'algorithme de comparaison a le processus suivant

• Comparaison similaire, puis comparez les nœuds enfants
• Déterminez d'abord si une partie a des nœuds enfants et l'autre pas (si les nouveaux enfants n'ont pas de nœuds enfants, supprimez les anciens nœuds enfants)
• Comparez la situation où les deux enfants ont des nœuds enfants (core diff)
• Comparez récursivement les nœuds enfants

La complexité temporelle du Diff normal entre deux arbres est O(n^3), mais dans les situations réelles, nous le faisons rarement 跨层级的移动DOM, donc Vue optimise Diff à partir de O(n^3) -> O(n), uniquement lorsque les anciens et les nouveaux enfants sont plusieurs nœuds enfants, l'algorithme Diff de base doit être utilisé pour une comparaison de même niveau.

L'algorithme Diff de base de Vue2 adopte l'algorithme de 双端比较 En même temps, il compare les deux extrémités des anciens et des nouveaux enfants, utilise la valeur clé pour trouver le nœud réutilisable, puis exécute. opérations connexes. Par rapport à l'algorithme Diff de React, dans les mêmes circonstances, il peut réduire le nombre de nœuds mobiles, réduire les pertes de performances inutiles et est plus élégant.

Vue3.x s'appuie sur l'algorithme
ivi et l'algorithme inferno

détermine le type de VNode lors de sa création, et lorsque mount/patch Dans le processus, 位运算 est utilisé pour déterminer le type d'un VNode. Sur cette base, combinée à l'algorithme Diff de base, les performances sont améliorées par rapport à Vue2.x. (L'implémentation réelle peut être consultée en conjonction avec le code source de Vue3.x.)

Cet algorithme utilise également l'idée de 动态规划 pour résoudre la sous-séquence récursive la plus longue.

(Après avoir vu cela, vous constaterez également que le charme des structures de données et des algorithmes est partout dans le cadre)

Intervieweur : (D'accord, d'accord, cela semble être un talent, mais laissez-moi me présenter C'est vraiment un peu ennuyeux, question suivante)

(Bases, ne faites pas 6)

Parlons du rôle du Dom virtuel et des attributs clés.

---

Puisque manipuler le DOM dans le navigateur coûte cher. Des opérations fréquentes sur le DOM entraîneront certains problèmes de performances. C'est le 产生原因 de Virtual Dom.

Le DOM virtuel de Vue2 s'appuie sur l'implémentation de la bibliothèque open source snabbdom.

Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(Il s'agit de la classe VNode dans le code source, qui est définie dans src/core/vdom/vnode.js.)

Le mappage de VirtualDOM au vrai DOM nécessite la création de VNode , diff, patch et autres étapes.

La fonction de key est de réutiliser autant que possible les éléments du DOM.

Lorsque seul l'ordre des nœuds dans les anciens et les nouveaux enfants est différent, la meilleure opération devrait être d'atteindre l'objectif de mise à jour en déplaçant la position de l'élément.

Vous devez enregistrer la relation de mappage entre les anciens et les nouveaux nœuds enfants afin que les nœuds réutilisables puissent être trouvés dans les anciens nœuds enfants. La clé est l'identifiant unique du nœud chez les enfants.

15. Connaissez-vous le keep-alive ?

---

keep-alive peut implémenter la mise en cache des composants, et le composant actuel ne sera pas déchargé lorsque le composant est activé. est commuté.

Deux attributs couramment utilisés include/exclude permettent de mettre en cache les composants de manière conditionnelle.

Deux cycles de vie activated/deactivated, permettent de savoir si le composant actuel est actif.

keep-alive utilise également l'algorithme LRU(Least Recently Used).

(C'est encore une fois la structure des données et l'algorithme. Il s'avère que les algorithmes ont aussi tellement d'applications sur le front-end)

16. dans Vue

L'ordre dans lequel les composants

---

sont appelés est 先父后子, et l'ordre dans lequel le rendu est terminé est 先子后父. L'opération de destruction des

composants est 先父后子, et l'ordre d'achèvement de la destruction est 先子后父.

Chargement du processus de rendu

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

Processus de mise à jour des sous-composants

父beforeUpdate->子beforeUpdate->子updated->父updated

Processus de mise à jour du composant parent

父 beforeUpdate -> 父 updated

Processus de destruction

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

17. Quels sont les moyens de communication des composants Vue2.x ?

---

• Communication des composants parent-enfant

  Parent->Enfantprops, Enfant->Parent$on、$emit

  Obtenir Instance de composant parent-enfant $parent、$children

  Ref Obtenez l'instance et appelez les propriétés ou les méthodes du composant

  Provide、inject Officiellement non recommandé, mais il est couramment utilisé lors de l'écriture d'un composant bibliothèques

• Communication entre composants Brother

  Event Bus Implémenter la communication entre composantsVue.prototype.$bus = new Vue

  Vuex

• Communication entre composants entre niveaux

  Vuex

  $attrs、$listeners

  Provide、inject

18. Comprenez-vous la RSS ?

---

SSR est un rendu côté serveur, 也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端.

SSR présente les avantages d’un meilleur référencement et d’une vitesse de chargement plus rapide du premier écran. Cependant, il présente également quelques inconvénients. Par exemple, nos conditions de développement seront limitées. Le rendu côté serveur ne prend en charge que deux hooks : beforeCreate et created. Lorsque nous avons besoin de bibliothèques d'extensions externes, nous avons besoin d'un traitement spécial Server-. les applications de rendu secondaire ont également besoin de l'environnement d'exécution de Node.js. Il existe également une demande de charge plus importante sur le serveur.

19. Quelles optimisations de performances avez-vous effectuées pour Vue ?

---

Étape d'encodage

• Essayez de réduire les données dans les données, et les données dans les données seront ajoutées. Les getters et les setters collecteront les observateurs correspondants
• v-if et v-for ne peuvent pas être utilisés ensemble
• Si vous devez utiliser v-for pour lier des événements à chaque élément, utilisez un proxy d'événement
• Les pages SPA utilisent des composants de mise en cache keep-alive
• Dans la plupart des cas, utilisez v-if au lieu de v-show
• clé pour garantir l'unicité
• Utiliser le routage Chargement paresseux, composants asynchrones
• Anti-tremblement, limitation
• Importation de modules tiers à la demande
• La longue liste défile jusqu'à la zone visible et le chargement dynamique
• Chargement paresseux des images

Optimisation SEO

• Pré-rendu
• Serveur -rendu côté SSR

Optimisation du packaging

• Code compressé
• Secousse d'arbre/levage de portée
• Utilisez CDN pour charger le module tiers
• Emballage multithread happypack
• splitChunks extrait les fichiers publics
• Optimisation de sourceMap

Expérience utilisateur

• Écran squelette
• PWA

Vous pouvez également utiliser le cache (cache client , cache du serveur) optimisation et activation du serveur compression gzip, etc.

(L'optimisation est un grand projet et impliquera de nombreux aspects. Veuillez postuler pour ouvrir une autre colonne ici)

20. Parlons des principes de mise en œuvre du routage de hachage et du routage historique<.> La valeur de

---

est en fait ce qui vient après location.hash dans l'URL. #

l'historique est en fait implémenté à l'aide de l'API fournie en HTML5, principalement

et history.pushState(). history.replaceState()

L'intervieweur a ramassé le café froid à côté de lui et en a bu une gorgée.

(Je ne peux pas poser plus de questions à ce type ?)

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

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!