Résumé des questions d'entretien Vue courantes (avec analyse des réponses)

Cet article partagera avec vous quelques questions d'entretien Vue (avec 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.

Les informations impliquées dans l'article proviennent d'Internet et d'un résumé personnel. Elles sont destinées à résumer l'apprentissage et l'expérience personnels. En cas d'infraction, veuillez contacter. à moi de le supprimer. Merci !

1. Comprendre MVVM

MVVM est l'abréviation de Model-View-ViewModel. Le

Modèle représente le modèle de données, et la logique métier pour la modification et le fonctionnement des données peut également être définie dans le modèle.

View représente le composant de l'interface utilisateur, qui est responsable de la conversion du modèle de données en affichage de l'interface utilisateur.

ViewModel surveille les modifications dans les données du modèle, contrôle le comportement de la vue et gère l'interaction de l'utilisateur. Une compréhension simple est un objet qui synchronise la vue et le modèle et connecte le modèle et la vue.

Sous l'architecture MVVM, il n'y a pas de connexion directe entre View et Model. Au lieu de cela, ils interagissent via ViewModel. L'interaction entre Model et ViewModel est bidirectionnelle, donc les modifications dans les données View seront synchronisées avec le modèle. , et les modifications apportées aux données du modèle seront immédiatement reflétées dans la vue.

ViewModel connecte la couche View et la couche Model via une liaison de données bidirectionnelle, et la synchronisation entre View et Model est complètement automatique sans intervention humaine, donc les développeurs uniquement Vous devez faire attention à logique métier, n'ont pas besoin d'exploiter manuellement le DOM et n'ont pas besoin de prêter attention à la synchronisation de l'état des données. La maintenance complexe de l'état des données est entièrement gérée par MVVM.

2. Vue implémente la liaison de données bidirectionnelle

Vue implémente la liaison de données bidirectionnelle principalement en : utilisant le piratage de données combiné au modèle éditeur-abonné , utilisez Object.defineProperty() pour détourner les setters et getters de chaque propriété, publier des messages aux abonnés lorsque les données changent et déclencher les rappels d'écoute correspondants. Lorsque vous transmettez un objet Javascript simple à une instance de Vue comme option de données, Vue parcourt ses propriétés et les convertit en getters/setters à l'aide de Object.defineProperty. Les getters/setters ne sont pas visibles par l'utilisateur, mais en interne, ils permettent à Vue de suivre les dépendances et de notifier les changements lorsque les propriétés sont accédées et modifiées. (Partage vidéo d'apprentissage : tutoriel vidéo Vue)

La liaison de données bidirectionnelle de Vue utilise MVVM comme entrée dans la liaison de données, intégrant Observer, Compile et Watcher, et se surveillant via le modèle Observer For. changements de données, Compile est utilisé pour analyser les instructions du modèle de compilation (dans vue, il est utilisé pour analyser {{}}), et enfin l'observateur est utilisé pour construire un pont de communication entre l'observateur et Compile pour réaliser des changements de données -> Afficher la mise à jour ; afficher les modifications interactives (entrée) -> effet de liaison bidirectionnelle de changement de modèle de données.

3. Transfert de paramètres entre les composants Vue

1. Valeur de passage du composant parent et du composant enfant

Pass du composant parent à composants enfants : les composants enfants reçoivent des données via la méthode props ; les composants enfants sont transmis aux composants parents : la méthode $emit transmet les paramètres

2. Transfert de données entre les composants non parents et enfants, les composants frères transmettent des valeurs

eventBus consiste à créer un centre d'événements, qui équivaut à une station de transfert, et peut être utilisé pour livrer et recevoir des événements. Si le projet est relativement petit, cela est plus approprié.

4. La différence entre v-show et v-if

• La différence entre v-show et v-if :

  v-show est une commutation CSS, v-if est une destruction et une recréation complètes.

• Utilisez v-show lorsque vous changez fréquemment

  , et v-if lorsque vous changez moins fréquemment pendant l'exécution

• v - if='false' v-if est un rendu conditionnel, il ne sera pas rendu lorsqu'il est faux

Cycle de vie de Vue

beforeCreate (avant la création) Avant le début des événements d'observation et d'initialisation des données

created (après la création) Observation complète des données, fonctionnement des propriétés et méthodes, événements d'initialisation, L'attribut $el n'a pas encore été affiché.

beforeMount (avant le chargement) est appelé avant le début du montage et la fonction de rendu associée est appelée pour la première fois. L'instance a effectué la configuration suivante : compilez le modèle et générez du HTML à partir des données contenues dans les données et le modèle. Notez que le code HTML n'a pas été monté sur la page pour le moment.

monté (après chargement) Appelé après que el soit remplacé par le vm.$el nouvellement créé et monté sur l'instance. L'instance a effectué la configuration suivante : remplacez l'objet DOM pointé par l'attribut el par le contenu html compilé ci-dessus. Terminez le rendu du HTML dans le modèle dans la page HTML. L'interaction Ajax est effectuée au cours de ce processus.

beforeUpdate (avant la mise à jour) est appelé avant que les données ne soient mises à jour, ce qui se produit avant que le DOM virtuel ne soit restitué et corrigé. Vous pouvez modifier davantage l'état dans ce hook sans déclencher un processus de nouveau rendu supplémentaire.

mis à jour (mis à jour) Appelé après le nouveau rendu du DOM virtuel et l'application de correctifs en raison de modifications de données. Lorsqu'il est appelé, le composant DOM a été mis à jour, afin que les opérations dépendantes du DOM puissent être effectuées. Dans la plupart des cas, cependant, il convient d'éviter de changer d'état pendant cette période, car cela pourrait entraîner une boucle infinie de mises à jour. Ce hook n'est pas appelé lors du rendu côté serveur.

beforeDestroy (avant destruction) Appelé avant la destruction de l'instance. L'instance est toujours entièrement disponible.

destroyed (après destruction) Appelé après la destruction de l'instance. Après l'appel, tous les écouteurs d'événements seront supprimés et toutes les instances enfants seront détruites. Ce hook n'est pas appelé lors du rendu côté serveur.

1. Quel est le cycle de vie d'une vue ?

Réponse : Le processus allant de la création à la destruction d'une instance Vue est le cycle de vie. Une série de processus depuis le début de la création, l'initialisation des données, la compilation de modèles, le montage de Dom → rendu, la mise à jour → rendu et la destruction sont appelés le cycle de vie de Vue.

2. Quel est le rôle du cycle de vie de la vue ?

Réponse : Il existe plusieurs hooks d'événement dans son cycle de vie, ce qui nous permet de former plus facilement une bonne logique lors du contrôle du processus de l'ensemble de l'instance Vue.

3. Combien d'étapes y a-t-il dans le cycle de vie d'une vue ?

Réponse : Elle peut être divisée en 8 étapes au total : avant/après création, avant/après chargement, avant/après mise à jour, avant/après destruction.

4. Quels hooks seront déclenchés au premier chargement de la page ?

Réponse : Cela déclenchera ce qui suit : beforeCreate, créé, avantMount, monté.

5. Dans quel cycle le rendu DOM est-il terminé ?

Réponse : le rendu DOM est terminé en monté.

5. Utilisation du tableau de la classe liée

• Méthode objetv-bind:class="{'orange': isRipe, 'green': isNotRipe}"
• Méthode tableauv-bind:class="[class1, class2]"
• En lignev-bind:style="{color: color, fontSize: fontSize+'px' }"

6. La différence entre l'attribut calculé et la montre watch

L'attribut calculé surveille automatiquement les changements dans les valeurs dépendantes, renvoyant ainsi dynamiquement le contenu et la surveillance. est un processus Lorsque la valeur surveillée change, un rappel peut être déclenché et faire quelque chose. La différence vient donc de l'utilisation. Si vous avez juste besoin de valeurs dynamiques, utilisez des propriétés calculées. Si vous avez besoin de connaître les changements de valeur, puis d'exécuter la logique métier, utilisez watch. Bien qu'il soit possible d'utiliser des méthodes inverses ou mixtes, elles sont utilisées. sont des usages incorrects.

1. Lorsqu'un objet est calculé, quelles sont ses options ?

Il existe deux options : get et set

2 Quelle est la différence entre calculé et méthodes ?

les méthodes sont une méthode. Elles peuvent accepter des paramètres, mais Computed ne peut pas être mise en cache, mais les méthodes ne peuvent pas

3.

calculé peut dépendre d'autres données calculées, voire d'autres composants

4 Lorsque la montre est un objet, quelles options a-t-elle ?

gestionnaire profond, profond, immédiat ou non exécuté immédiatement

Résumé

Lorsque certaines données doivent changer avec d'autres données, il est recommandé d'utiliser le calcul . Lorsqu'il y a une réponse générale aux modifications de données, il est recommandé d'utiliser watcher

lors de l'exécution de certaines logiques métier ou opérations asynchrones 7. Implémentation du routage Vue : mode hachage et mode historique

Mode hachage : Dans le navigateur, le symbole "#", # et les caractères après # sont appelés hachage, et sont lus avec window.location.hash Caractéristiques : Bien que le hachage soit dans ; l'URL, mais elle n'est pas incluse dans la requête HTTP ; elle est utilisée pour guider les actions du navigateur et est inutile pour la sécurité côté serveur. Le hachage ne rechargera pas la page. En mode hachage, seul le contenu précédant le symbole dièse sera inclus dans la requête, comme http://www.xxx.com. Par conséquent, pour le backend, même si la couverture complète de l'itinéraire n'est pas obtenue, 404 ne le sera pas. être retourné.

mode historique : history adopte les nouvelles fonctionnalités de HTML5 et fournit deux nouvelles méthodes : pushState(), replaceState() pour modifier la pile d'historique du navigateur et l'événement popState pour surveiller l'état ; changements. En mode historique, l'URL du front-end doit être cohérente avec l'URL qui initie réellement la requête vers le back-end, telle que http://www.xxx.com/items/id. Si le backend ne dispose pas de traitement de routage pour /items/id, une erreur 404 sera renvoyée.

8. Quelle est la différence entre Vue, Angular et React ?

(La version est constamment mise à jour, les différences suivantes peuvent ne pas être très correctes. Je n'utilise que vue dans mon travail et je ne suis pas très familier avec Angular et React)

1. Différences avec AngularJS

Similitudes :

Les deux instructions de prise en charge : les instructions intégrées et les instructions personnalisées ; les deux prennent en charge les filtres : les filtres intégrés et les filtres personnalisés ; les deux prennent en charge la liaison de données bidirectionnelle ; aucun des deux ne prend en charge les navigateurs bas de gamme.

Différences :

AngularJS a un coût d'apprentissage élevé, comme l'ajout de la fonctionnalité d'injection de dépendances, alors que les API fournies par Vue.js lui-même sont relativement simples et intuitif ; en termes de performances, AngularJS s'appuie sur une vérification sale des données, donc plus il y a d'observateurs, plus il est lent ; Vue.js utilise une observation basée sur le suivi des dépendances et utilise des mises à jour de file d'attente asynchrones, et toutes les données sont déclenchées indépendamment.

2. Différences avec React

Mêmes points :

React utilise une grammaire JSX spéciale, Vue.js recommande également d'écrire un format de fichier spécial .vue dans le développement de composants. Il existe certaines conventions sur le contenu des fichiers. Les deux doivent être compilés et utilisés. L'idée centrale est la même : tout est un composant et les instances de composants peuvent être imbriquées. ; les deux fournissent des fonctions de hook raisonnables qui permettent aux développeurs de personnaliser leurs besoins ; aucune des deux n'a intégré AJAX, Route et d'autres fonctions dans le package de base, mais sont chargées sous forme de plug-ins ; les deux prennent en charge les fonctionnalités des mixins dans le développement de composants ; .

Différences :

Le DOM virtuel utilisé par React effectuera des vérifications approfondies sur les résultats rendus. Vue.js fournit des instructions, des filtres, etc. peut faire fonctionner Virtual DOM très facilement et rapidement.

9. Modificateurs d'événement

• Lier un événement de clic natif : ajouter un événement natif,

• Autre modificateurs d'événement : arrêter de prévenir soi-même

• Combinaison de touches : click.ctrl.exact n'est déclenché que lorsque ctrl est enfoncé

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

Pourquoi les données du composant doivent-elles être une fonction puis renvoyer un objet, alors que dans la nouvelle instance Vue, les données peuvent être directement un objet ?

Étant donné que les composants sont utilisés pour la réutilisation, les objets dans JS sont des relations de référence, donc la portée n'est pas isolée et les instances du nouveau Vue ne seront pas réutilisées, il n'y a donc aucun problème de référencement des objets

Comprendre que Vue est un framework progressif

11 Progressive signifie : la moindre affirmation.

Vue n'est peut-être pas aussi bon que React ou Angular à certains égards, mais il est progressif et n'a pas de prétentions fortes. Vous pouvez l'utiliser pour implémenter un ou deux composants au-dessus du grand système d'origine. . Lorsque vous l'utilisez avec jQuery ; vous pouvez également l'utiliser pour développer l'ensemble de la famille et l'utiliser comme Angular, vous pouvez également utiliser sa vue pour faire correspondre l'ensemble de la couche inférieure de votre propre conception ; Vous pouvez utiliser les concepts d'OO et de modèles de conception dans la logique de données sous-jacente, ou vous pouvez utiliser des méthodes fonctionnelles. Il ne fait que ce qu'il doit faire et ne fait rien. plus. Ma compréhension du sens du mot progressiste est la suivante : ne pas faire plus que ce qui est requis.

12. Quels sont les deux cœurs de vue.js ?

Basé sur les données et composant

13. Le rôle de la key valeur dans vue

Utiliser la clé pour faire quelque chose pour chacun node La fonction principale d'une clé d'identifiant unique

est de mettre à jour efficacement le DOM virtuel . De plus, lors de l'utilisation du changement de transition d'éléments avec le même nom de balise dans Vue, l'attribut key sera également utilisé pour permettre à Vue de les distinguer. Sinon, Vue remplacera uniquement ses attributs internes et ne déclenchera pas la transition. effet.

14. La priorité de v-for et v-if

La priorité de v-for est supérieure à v-if

15. Composant

1. Comment appeler le composant parent dans vue par sous-composant

La première méthode consiste à passer this.$parent directement dans le sous-composant .event pour appeler la méthode du composant parent.

La deuxième méthode consiste à utiliser $emit dans le composant enfant pour déclencher un événement vers le composant parent, et le composant parent peut écouter cet événement.

La troisième méthode est que le composant parent transmet la méthode au composant enfant et appelle cette méthode directement dans le composant enfant.

2. Le composant parent dans Vue appelle la méthode du composant enfant

Le composant parent utilise l'attribut ref pour faire fonctionner la méthode du composant enfant.

父：
<child ref="childMethod"></child>
子：
method: {
  test() {
     alert(1)
  }
}
在父组件里调用test即 this.$refs.childMethod.test()

3. Transfert de valeur entre les composants vue

(1) Le composant parent transmet la valeur au composant enfant :

• Quand le composant parent appelle le composant enfant, les propriétés sont liées dynamiquement
  

<parent :dataList=&#39;dataList&#39;></parent>

• Le composant enfant définit des accessoires pour recevoir des accessoires de propriété liés dynamiquement : ['dataList ']

• Données d'utilisation du sous-composant
  

(2) Le sous-composant obtient activement les attributs et les méthodes entre le parent et l'enfant :

Utilisez this.$parent.property/this.$parent.method dans les composants enfants.

(3) Le composant enfant transmet la valeur au composant parent :

1. Utilisez l'attribut ref
1. Liez l'attribut ref lorsque le composant parent appelle le composant enfant
< ;parent :ref='parent'>
2. Utilisez this.$refs.parent.property/this.$refs.parent.method dans le composant parent<🎜. >2. Utilisez la méthode $emit
1. Le composant enfant appelle this.$emit('method name', value transmis)
2 Le composant parent obtient la valeur transmise via le 'nom de la méthode' lié au 'nom de la méthode'. composant enfant.

(4) Transfert de valeur entre les composants de vue au niveau de la page

• Utilisez vue-router pour transmettre des paramètres avec des paramètres via des liens de saut.

• 使用本地缓存localStorge。

• 使用vuex数据管理传值。

（5）说说vue的动态组件。

多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。

（6）keep-alive内置组件的作用

可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当

(7)递归组件的用法

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。

16、怎么定义vue-router的动态路由？怎么获取传过来的值？

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{
 path: '/details/:id'
 name: 'Details'
 components: Details
}

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

this.$route.params.id

17、vue-router有哪几种路由守卫?

全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter

18、$route和 $router的区别是什么？

• $router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

• $route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

19、vue-router响应路由参数的变化

• (1)用watch 检测

• (2)组件内导航钩子函数

20、 vue-router 传参

(1)使用Params:

• 只能使用name，不能使用path

• 参数不会显示在路径上

• 浏览器强制刷新参数会被清空

（2）使用Query：

• 参数会显示在路径上，刷新不会被清空

• name 可以使用path路径

21、不用Vuex会带来什么问题？

1、可维护性会下降，你要想修改数据，你得维护三个地方

2、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的

3、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

22、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

23、、vuex的State特性是？

1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

24、vuex的Getter特性是？

1、getters 可以对State进行计算操作，它就是Store的计算属性
2、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用，是可以不用getters

25、vuex的Mutation特性是？

1、Action 类似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接变更状态。
3、Action 可以包含任意异步操作

26. Le code de requête ajax dans Vue.js doit-il être écrit dans les méthodes du composant ou dans les actions de vuex ?

1. Si les données demandées doivent être partagées par d'autres composants et ne sont utilisées qu'au sein du composant demandé, il n'est pas nécessaire de les mettre dans l'état de vuex.

2. S'il est réutilisé ailleurs, cela est probablement nécessaire. Si nécessaire, veuillez mettre la demande dans l'action pour faciliter la réutilisation, et la regrouper dans une promesse de retour, et utiliser async sur le site d'appel. wait traite les données renvoyées. Si vous ne souhaitez pas réutiliser cette requête, il est pratique de l'écrire directement dans le fichier vue.

27. La différence entre le principe de liaison de données bidirectionnelle vue, le principe vue2 et vue3

Parce que l'objet vue2.0. DefineProperty Il ne peut détourner que les attributs d'objet et ne peut pas surveiller les modifications dans les indices du tableau, ce qui entraîne l'inconvénient que les éléments ajoutés via les indices de données ne peuvent pas répondre en temps réel. Afin de résoudre ce problème, après le traitement interne de Vue, vous pouvez utiliser push(), pop(), shift(), unshift(), splice(), sort(), reverse() pour le traitement du hack, donc d'autres attributs du tableau sont également surveillés. Non, cela a certaines limites.

Étant donné que object.defineProperty ne peut détourner que les propriétés des objets, chaque propriété de chaque objet doit être traversée. Dans vue2.0, la surveillance des données est réalisée par récursivité + parcours d'objets de données. Si la valeur de l'attribut est un objet, un parcours approfondi est également requis.

Le proxy dans Vue3.0 peut non seulement proxy des objets, mais également des tableaux proxy, et peut également proxy des attributs ajoutés dynamiquement. Il existe 13 opérations de détournement : get obtient une certaine valeur de clé (reçoit 2 paramètres, valeur cible). et valeur cible valeur clé) set définit une valeur clé (valeur cible, valeur clé cible, valeur à modifier, valeur d'origine avant modification) appliquer Utiliser l'opérateur in pour déterminer si une clé existe deleteProperty supprime une propriété definitionProperty definition Une nouvelle propriété

Merci

Pour plus de connaissances liées à 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!