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.
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)
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 ( 发布订阅).
(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)
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
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
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)
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)
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.
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手动注销.
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.
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.
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.
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)
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 :
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)
Simplement parlant, l'algorithme de comparaison a le processus suivant
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)
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.
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)
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
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
Event Bus Implémenter la communication entre composantsVue.prototype.$bus = new Vue
Vuex
Vuex
$attrs、$listeners
Provide、inject
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.
Étape d'encodage
Optimisation SEO
Optimisation du packaging
Expérience utilisateur
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)
est en fait ce qui vient après location.hash dans l'URL. #
et history.pushState(). history.replaceState()
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
