Neuf questions courantes d'entretien avec Vuejs, les connaissez-vous ?

11 questions courantes en entretien avec Vuejs, les connaissez-vous ? De la colonne questions d'entretien vue

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 interface utilisateur pour l'affichage.
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, connectant 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 le modèle. Les modifications apportées au modèle dans les données seront également immédiatement reflétées sur 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 entièrement automatique sans intervention humaine, de sorte que les développeurs doivent uniquement se concentrer sur la logique métier et n'ont pas besoin d'opérations manuelles. pas besoin de prêter attention à la synchronisation de l'état des données. La maintenance de l'état des données complexes est entièrement gérée par MVVM.

2. Le 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

créé (après la création)

Observation complète des données, fonctionnement des attributs et des méthodes, événements d'initialisation, l'attribut n'a pas encore été affiché

beforeMount (avant chargement)

est appelé avant le début du montage, Le la fonction de rendu pertinente 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 mise à jour)

Appelé avant la mise à jour des données, ce qui se produit avant que le DOM virtuel ne soit restitué et corrigé. D'autres changements d'état peuvent être effectués dans ce hook sans déclencher un processus de nouveau rendu supplémentaire.

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 (after 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é.

3. Le principe de Vue pour implémenter la liaison de données bidirectionnelle : Object.defineProperty()

Vue implémente la liaison de données bidirectionnelle principalement en utilisant le détournement 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.

La liaison de données bidirectionnelle de Vue utilise MVVM comme entrée pour la liaison de données, intégrant Observer, Compile et Watcher. Elle utilise Observer pour surveiller les modifications de données de son propre modèle et utilise Compile pour analyser et compiler les instructions du modèle. (vue est utilisée pour analyser {{}}), et utilise enfin watcher pour construire un pont de communication entre l'observateur et Compile afin d'obtenir un changement de données -> une mise à jour de la vue un changement interactif (entrée) -> un effet de liaison bidirectionnelle de changement de modèle de données ; .

    <p>
        <input>
        </p><p></p>
    

<script>
    var obj = {}
    Object.defineProperty(obj, &#39;txt&#39;, {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById(&#39;txt&#39;).value = newValue
            document.getElementById(&#39;show&#39;).innerHTML = newValue
        }
    })
    document.addEventListener(&#39;keyup&#39;, function (e) {
        obj.txt = e.target.value
    })
</script>

4. Transfert de paramètres entre les composants Vue

1. Transmettre les valeurs entre le composant parent et le composant enfant
Le composant parent passe au composant enfant : le composant enfant reçoit les données via la méthode props ;
composant enfant Passé au composant parent : 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 les valeurs
eventBus, qui consiste à créer un centre d'événements, équivalent à un station de transfert, qui peut être utilisée pour transmettre des événements et recevoir des événements. Si le projet est relativement petit, cela est plus approprié. (Bien que de nombreuses personnes recommandent d'utiliser VUEX directement, cela dépend des besoins. La technologie n'est qu'un moyen, et atteindre l'objectif est le roi.)

5. Implémentation du routage de Vue : mode hachage et mode historique

Mode hachage :

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

mode historique :

history adopte les nouvelles fonctionnalités de HTML5 et fournit deux nouvelles méthodes : pushState(), replaceState() pour modifier la pile de l'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, comme 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. Le site officiel de Vue-Router le décrit ainsi : "Cependant, pour bien jouer dans ce mode, il nécessite également un support de configuration en arrière-plan... Il faut donc ajouter une ressource candidate côté serveur qui couvre toutes les situations : si le L'URL ne correspond à aucune ressource statique. La même page index.html doit être renvoyée, qui est la page dont dépend votre application "

6. La fonction hook du routage vue

est uniquement. utilisé pour lire l'état et le mettre dans le magasin. Moyen; La façon de changer l'état est de soumettre des mutations, ce qui est une logique asynchrone qui doit être encapsulée dans l'action.
Introduisez store dans main.js et injectez-le. Un nouveau magasin d'annuaire est créé,...export.
Les scénarios incluent : dans les applications d'une seule page, l'état entre les composants, la lecture de musique, l'état de connexion, l'ajout au panier

l'état

Vuex utilise une seule arborescence d'état, c'est-à-dire , chaque application ne contient qu'une seule instance de magasin, mais une seule arborescence d'état n'entre pas en conflit avec la modularité. L'état des données stockées ne peut pas être modifié directement.

mutations

Les méthodes définies par les mutations modifient dynamiquement l'état ou les données dans le magasin Vuex.

getters

Propriétés calculées similaires à vue, principalement utilisées pour filtrer certaines données.

action

les actions peuvent être comprises comme le changement de la méthode de traitement des données lors des mutations en méthode de traitement des données asynchrone. En termes simples, il s'agit d'un fonctionnement asynchrone des données. La couche de vue distribue les actions via store.dispath.

modules

Lorsque le projet est particulièrement complexe, chaque module peut avoir son propre état, mutation, action et getters, rendant la structure très claire et facile à gérer.

//store实例
const store = new Vuex.Store({ 
    state: {
        count: 0
    },
    mutations: {                
        increment (state) {
            state.count++
        }
    },
    actions: { 
        increment (context) {
            context.commit('increment')
        }
    }
})

7. Comment ajouter des instructions personnalisées à vue-cli ?

1. Créer des instructions locales

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2. Instructions globales

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3. Utilisation des instructions

<p>
    </p><p></p>
    <p></p>

8. Comment personnaliser un filtre dans Vue. ?

Code HTML :

<p>
     <input>
     {{msg| capitalize }}
</p>

Code JS :

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

Filtre de définition globale

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Questions d'entretien auxquelles on peut répondre en une seule phrase

1.css ne fonctionne que dans le composant actuel

Réponse : écrivez simplement scoped dans la balise de style Par exemple :

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

Réponse : v-if est rendu selon les conditions, v-show est le bloc ou aucun affichage

3.

Réponse : Le routeur est un objet "instance de routage" qui comprend des méthodes de saut de routage, des fonctions de hook, etc.

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

Réponse : système de composants basé sur les données

5 Plusieurs instructions couramment utilisées dans vue

Réponse : v-for, v-if, v-bind, v-. on , v-show, v-else

6. Quels sont les modificateurs couramment utilisés dans vue ?

Réponse : .prevent : L'événement submit ne rechargera plus la page ; .stop : Empêche l'événement click de bouillonner ; .self : Il sera déclenché lorsque l'événement se produit sur l'élément lui-même plutôt que sur l'élément enfant ; .capture : écoute d'événement,

sera appelé lorsqu'un événement se produit 7. V-on peut-il lier plusieurs méthodes ?

Réponse : Oui

8. Quel est le rôle de la valeur clé dans vue ?

Réponse : lorsque Vue.js utilise v-for pour mettre à jour la liste des éléments rendus, la stratégie par défaut est "réutilisation sur place". Si l'ordre des éléments de données est modifié, Vue ne déplacera pas les éléments DOM pour qu'ils correspondent à l'ordre des éléments de données, mais réutilisera simplement chaque élément et s'assurera qu'il affiche chaque élément qui a été rendu à un index spécifique. La fonction principale de key est de mettre à jour efficacement le DOM virtuel.

9. Quelles sont les propriétés calculées de vue ?

Réponse : Mettre trop de logique dans le modèle rendra le modèle trop lourd et difficile à maintenir. Lorsqu'un traitement complexe des données est requis et peut être utilisé plusieurs fois, essayez d'utiliser des attributs calculés. Avantages : ① Rend la structure de traitement des données claire ; ② Dépend des données, les mises à jour des données et les résultats du traitement sont automatiquement mis à jour ; ③ Ceci à l'intérieur de l'attribut calculé pointe vers l'instance vm ; Nom de l'attribut directement ; ⑤ La méthode getter couramment utilisée, vous pouvez également utiliser la méthode set pour modifier les données ; ⑥ Par rapport aux méthodes, les méthodes seront recalculées quelle que soit la modification des données dépendantes, mais lorsque les données dépendantes restent inchangées, le calcul sera obtenu du cache et ne sera pas recalculé.

10. Applications d'une seule page telles que vue et leurs avantages et inconvénients

Réponse : Avantages : L'objectif de Vue est d'obtenir une liaison de données réactive et des composants de vue combinés via l'API la plus simple possible. Le cœur est un système de liaison de données réactif. MVVM, basé sur les données, composé de composants, léger, concis, efficace, rapide et convivial pour les modules.
Inconvénients : ne prend pas en charge les versions inférieures des navigateurs, ne prend en charge qu'au moins IE9 ; ne favorise pas l'optimisation du référencement (si vous souhaitez prendre en charge le référencement, il est recommandé de restituer les composants via le serveur, le chargement prend un temps relativement long) ; la page d'accueil pour la première fois ; vous ne pouvez pas utiliser les boutons de navigation du navigateur et devez effectuer vous-même l'avance et la marche arrière.

11. Comment définir la route dynamique de vue-router ? Comment obtenir la valeur transmise

Réponse : Dans le fichier index.js du répertoire du routeur, ajoutez /:id au Attribut path , obtenu à l'aide du params.id de l'objet routeur.

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!