11 questions courantes en entretien avec Vuejs, les connaissez-vous ? De la colonne questions d'entretien vue
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.
Avant le début des événements d'observation et d'initialisation des données
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é
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.
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.
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.
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.
Appelé avant la destruction de l'instance. L'instance est toujours entièrement disponible.
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.
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.
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.
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.
Réponse : Cela déclenchera ce qui suit : beforeCreate, créé, avantMount, monté.
Réponse : le rendu DOM est terminé en monté.
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, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
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.)
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.
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 "
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
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.
Les méthodes définies par les mutations modifient dynamiquement l'état ou les données dans le magasin Vuex.
Propriétés calculées similaires à vue, principalement utilisées pour filtrer certaines données.
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.
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')
}
}
})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';
}
}
}
})Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})<p> </p><p></p> <p></p>
<p>
<input>
{{msg| capitalize }}
</p>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)
}
}
})Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})Réponse : écrivez simplement scoped dans la balise de style Par exemple :
Réponse : v-if est rendu selon les conditions, v-show est le bloc ou aucun affichage
Réponse : 
Le routeur est un objet "instance de routage" qui comprend des méthodes de saut de routage, des fonctions de hook, etc.
Réponse : système de composants basé sur les données
Réponse : v-for, v-if, v-bind, v-. on , v-show, v-else
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,
Réponse : Oui
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.
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é.
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.
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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
