Synthèse des points de connaissances communs en vue de projets pratiques

Cette fois, je vais vous apporter un résumé des points de connaissances couramment utilisés dans les projets pratiques Vue. Quelles sont les précautions pour les projets pratiques Vue. Voici des cas pratiques, jetons un coup d'œil.

[Recommandations associées : questions d'entretien avec vue (2020)]

Les principes sous-jacents de vue ?

Communication entre les composants de vue ?

Combien de méthodes existe-t-il pour déterminer le type de données en JS ?

La méthode la plus courante pour déterminer : typeof

Méthode pour déterminer le type d'un objet connu : instanceof

est jugée en fonction du constructeur de l'objet : constructor

Méthode invincible et omnipotente : jquery.type()

Quelle est la différence entre vue et angulaire ?

1.vue n'est que la couche de vue dans mvvm. C'est juste une bibliothèque d'outils comme jquery, pas un framework, tandis qu'angular est la couche. cadre mvvm.
2. La liaison bidirectionnelle de Vue est implémentée sur la base de 3. getter/setter dans ES5, tandis qu'angular implémente son propre ensemble de règles de compilation de modèles, qui nécessitent une vérification dite "sale", contrairement à vue. Par conséquent, Vue est plus efficace en termes de performances, mais le prix est qu'il ne peut pas être pris en charge par les navigateurs inférieurs à IE9.
4.vue doit fournir un objet el pour l'instanciation, et toutes les portées suivantes se trouvent également sous l'objet el, tandis qu'angular correspond à la page html entière. Une page peut avoir plusieurs instances Vue, mais Angular ne semble pas fonctionner de cette façon.
5.vue est vraiment facile à démarrer et le coût d'apprentissage est relativement faible. Cependant, il n'y a pas beaucoup de documents de référence. Les documents officiels sont relativement simples et manquent de cas d'utilisation complets. Pour une utilisation avancée, vous devez étudier le code source vous-même, du moins pour le moment.

Parlez-moi de votre compréhension de la vérification sale angulaire ?

En angulaire, vous ne pouvez pas savoir si vos données ont changé, donc il définit certaines conditions. Lorsque vous déclenchez ces conditions, il effectue une détection pour parcourir toutes les données, comparez les. les modifications que vous avez apportées, puis exécutez les modifications.
Ce test est très peu scientifique. Et l'efficacité n'est pas élevée, il y a beaucoup de places redondantes, c'est donc officiellement appelé sale chèque.

active-class est un attribut de quel composant ?

Le composant router-link du module vue-router.

Comment définir un routage imbriqué ?

Dans les projets réels, nous rencontrerons plusieurs couches de composants imbriqués, mais comment implémenter le routage imbriqué ? Par conséquent, nous devons utiliser la configuration des enfants dans les paramètres de VueRouter, afin que l'imbrication des routes puisse être correctement implémentée.

index.html n'a qu'une seule sortie de routage

<p id="app"> 
  <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> 
  <router-view></router-view> 
</p>

main.js La redirection du routage affichera le composant home dès le chargement de la page, car La redirection pointe vers. le composant home, le point de redirection et le point de chemin doivent être cohérents. Il y a des sous-routes à l'intérieur des enfants. Bien entendu, les sous-routes peuvent également être imbriquées à l'intérieur des sous-routes.

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 
//引入两个组件 
import home from "./home.vue" 
import game from "./game.vue" 
//定义路由 
const routes = [ 
  { path: "/", redirect: "/home" },//重定向,指向了home组件 
  { 
    path: "/home", component: home, 
    children: [ 
      { path: "/home/game", component: game } 
    ] 
  } 
] 
//创建路由实例 
const router = new VueRouter({routes}) 
new Vue({ 
  el: '#app', 
  data: { 
  }, 
  methods: { 
  }, 
  router 
})

home.vue, cliquez sur Afficher pour afficher la sous-route. La sortie de la sous-route doit être dans la route parent, sinon la sous-route ne peut pas être affichée.

<template> 
  <p> 
    <h3>首页</h3> 
    <router-link to="/home/game"> 
      <button>显示<tton> 
    </router-link> 
    <router-view></router-view> 
  </p> 
</template>

game.vue

 <template> 
  <h3>游戏</h3> 
</template>

Comment définir le routage dynamique de vue-router ? Comment récupérer les paramètres dynamiques transmis ?

Dans le fichier index.js du répertoire du routeur, ajoutez /:id à l'attribut path.

Utilisez le params.id de l'objet routeur.

Quels types de crochets de navigation possède vue-router ?

Trois types,

Le premier : c'est le hook de navigation global : router.beforeEach(to,from,next), sa fonction est de juger et d'intercepter avant de sauter.
Le deuxième type : les hooks au sein des composants
Le troisième type : le routage des composants exclusifs séparément

Qu'est-ce que scss ? Quelles sont les étapes d'installation et d'utilisation dans vue.cli ? Quelles sont ses principales caractéristiques ?

Pré-compilation de CSS.

Étapes à utiliser :

Étape 1 : Utilisez npm pour télécharger trois chargeurs (sass-loader, css-loader, node-sass)

Étape 2 : Recherchez webpack.base.config.js dans le répertoire build, et ajoutez une extension.scss à l'attribut extends

Étape 3 : Toujours dans le même fichier, configurez un module attribut

Étape 4 : Ajoutez ensuite l'attribut lang à la balise de style du composant, par exemple : lang="scss"

Quelles sont les principales fonctionnalités :

1 Vous pouvez utiliser des variables, par exemple ($variable name = value
2. peut utiliser un périphérique de mixage, tel que ()
3 Peut être imbriqué

Qu'est-ce que mint-ui ? Comment utiliser ? Nommez au moins trois façons d’utiliser les composants ?

Bibliothèque de composants frontaux basée sur Vue. Installation de npm, puis importation de styles et js, vue.use (mintUi) est introduit globalement. Introduit localement dans un seul composant : importez {Toast} depuis 'mint-ui'.

Composant un : Toast (« connexion réussie ») ;
Composant deux : mint-header
Composant trois : mint-swiper

Qu'est-ce que le v-model ? Comment utiliser ? Comment lier des événements à des balises dans Vue ?

Peut réaliser une liaison bidirectionnelle, des instructions (v-class, v-for, v-if, v-show, v-on). L'attribut data de la couche modèle de vue. Événement de liaison :

Quels sont les avantages et les inconvénients de l'iframe ?

iframe est également appelé cadre intégré. Un cadre intégré est similaire à une page Web de cadre. Il peut intégrer le cadre et le contenu d'une page Web dans une page Web existante.

Avantages :

Résoudre les problèmes de chargement liés au chargement lent du contenu tiers tel que les icônes et les publicités

Bac à sable de sécurité

Scripts de chargement parallèle

Barre de navigation facile à réaliser

Inconvénients :

iframe bloquera l'événement Onload de la page principale

Même si le contenu est vide, le chargement prendra du temps

Pas de sémantique

Décrivez brièvement Sass et Less, et expliquez les différences ?

Ce sont des langages de style dynamique, des préprocesseurs CSS et une couche d'abstraction sur CSS. Ils sont compilés en CSS en utilisant une syntaxe/un langage spécial.

Les symboles de variables sont différents, less est @ et Sass est $;

Sass prend en charge les instructions conditionnelles, vous pouvez utiliser if{}else{}, for{} boucles, etc. Less ne le prend pas en charge ;

Sass est basé sur Ruby et est traité côté serveur, tandis que Less doit introduire less.js pour traiter le code Less et afficher le CSS vers le navigateur

Qu'est-ce qu'axios ? Comment utiliser ? Décrivez le processus d'utilisation pour implémenter la fonctionnalité de connexion ?

Module qui demande des ressources en arrière-plan. npm install axios -S est installé, puis envoyé entre les domaines, il doit être défini dans config/index.js dans le fichier de configuration . Si l'arrière-plan est Tp5, définissez un itinéraire de ressources. Utilisez import in js, puis .get ou .post. S'il réussit, il sera renvoyé dans la fonction .then, s'il échoue, il sera renvoyé dans la fonction .catch

Dans l'avancement axios+tp5, quelle est l'opération d'appel de axios.post(' API/utilisateur') ? Qu'en est-il de axios.put('api/user/8′) ?

Inter-domaine, ajout d'opérations utilisateur, opérations de mise à jour.

Qu'est-ce que vuex ? Comment utiliser ? Quel scénario fonctionnel l’utilise ?

Gestion de l'état dans le framework vue. Introduisez store dans main.js et injectez-le. Un nouveau magasin d'annuaire est créé,...export. Les scénarios incluent : l'état entre les composants dans une application d'une seule page. Lecture de musique, statut de connexion, ajout au panier

Qu'est-ce que le framework mvvm ? Quelle est la différence entre celui-ci et les autres frameworks (jquery) ? Quels scénarios sont adaptés ?

Un framework model+view+viewModel, un modèle de modèle de données, viewModel connecte deux

Différence : vue basée sur les données, affiche la couche de vue via les données au lieu des opérations de nœuds .

Scénario : Scénarios avec beaucoup d'opérations de données, plus pratiques

Quelles sont les méthodes de personnalisation des instructions (v-check, v-focus) ? Quelles fonctions de hook a-t-il ? Quels autres hooksparamètres de fonction ?

Directive définie globalement : il y a deux paramètres dans la méthode directive de l'objet vue, l'un est le nom de la directive et l'autre est la fonction. Instructions définies dans le composant : directives

Fonction Hook : liaison (déclenchée par un événement de liaison), insérée (déclenchée lors de l'insertion d'un nœud), mise à jour (mises à jour associées au sein du composant)

Paramètres de la fonction Hook : el , bind

Nommez au moins 4 commandes dans vue et leur utilisation ?

v-if : Déterminer s'il faut masquer ; v-for : Boucler les données ; v-bind:class : Lier un attribut ; v-model : Implémenter une liaison bidirectionnelle

Qu'est-ce que vue-router ? De quels composants dispose-t-il ?

vue est utilisée pour écrire un plug-in de routage. Quels sont les crochets de navigation pour router-link et router-view

 ? Quels paramètres ont-ils ?

Les crochets de navigation incluent :

les crochets a/globaux et les crochets exclusifs aux composants. b/beforeRouteEnter, afterEnter, beforeRouterUpdate, beforeRouteLeave

Paramètres :

Il y a to (l'itinéraire à parcourir), from (l'itinéraire à quitter), next (vous devez utiliser cette fonction pour aller au suivant) Une route, si elle n'est pas utilisée, interceptez-la) Les plus couramment utilisées sont celles-ci

Quel est le principe de la liaison de données bidirectionnelle de Vue ?

vue.js utilise le détournement de données combiné au modèle éditeur-abonné. Il utilise Object.defineProperty() pour détourner les setters et getters de chaque propriété et publier des messages lorsque les données changent. A l'abonné, déclenchez le rappel d'écoute correspondant.

Étapes spécifiques :

Étape 1 : Parcourir de manière récursive les objets de données qui doivent être observés, y compris les attributs des objets de sous-attributs , et ajoutez-les Setters et getters
Dans ce cas, attribuer une valeur à cet objet déclenchera le setter, et vous pourrez ensuite surveiller les modifications des données

Deuxième étape : compiler analyse les instructions du modèle et convertit les variables dans le modèle Remplacez-le par des données, puis initialisez la vue de la page de rendu, liez la fonction de mise à jour au nœud correspondant à chaque instruction et ajoutez des abonnés pour surveiller les données. Une fois les données modifiées, recevez une notification et mettez à jour la vue

Étape 3 : Les abonnés Watcher sont le pont de communication entre Observer et Compile. Les principales choses qu'ils font sont :

1. S'ajoutent à l'attribut abonné (dep) lorsqu'ils sont instanciés. Ils doivent avoir une méthode update.()
3. Lorsque dep.notice() vous avertit des changements d'attribut, vous pouvez appeler votre propre méthode update() et déclencher la liaison de rappel dans Compile, vous aurez alors terminé.

Étape 4 : Comme entrée dans la liaison de données, MVVM intègre Observer, Compile et Watcher, utilise Observer pour surveiller les modifications dans ses propres données de modèle, utilise Compile pour analyser et compiler les instructions du modèle, et enfin utilise Watcher pour définir up Le pont de communication entre Observer et Compile réalise l'effet de liaison bidirectionnelle des modifications de données -> afficher les mises à jour ; afficher les modifications interactives (entrée) -> modifications du modèle de données.

Veuillez expliquer en détail votre compréhension du cycle de vie de vue ? Un total de 8 étapes : avant/après création, avant/après chargement, avant/après mise à jour, avant/après destruction

Avant/après création : en In l'étape beforeCreated, l'élément de montage $el et les données de l'objet de données de l'instance de vue sont tous deux indéfinis et n'ont pas été initialisés. Dans la phase de création, les données de l'objet de données de l'instance vue sont disponibles, mais $el ne le sont pas.

Avant/après chargement : dans l'étape beforeMount, $el et les données de l'instance vue sont initialisés, mais le nœud dom virtuel avant est toujours monté et data.message n'a pas été remplacé. Dans l'étape montée, l'instance vue est montée et data.message est rendu avec succès.

Avant/après mise à jour : lorsque les données changent, les méthodes beforeUpdate et mise à jour seront déclenchées.

Avant/après destruction : après l'exécution de la méthode destroy, les modifications apportées aux données ne déclencheront plus la fonction périodique, indiquant que l'instance Vue a libéré la surveillance des événements et la liaison au dom, mais que la structure dom existe toujours .

Veuillez nous parler du processus d'encapsulation des composants vue ? Tout d'abord, les composants peuvent améliorer l'efficacité du développement de l'ensemble du projet. Il peut résumer la page en plusieurs modules relativement indépendants, ce qui résout les problèmes de notre développement de projet traditionnel : faible efficacité, maintenance difficile, réutilisabilité et autres problèmes.

Ensuite, utilisez la méthode Vue.extend pour créer un composant, puis utilisez la méthode Vue.component pour enregistrer le composant. Les composants enfants nécessitent des données et peuvent accepter des définitions dans les accessoires. Une fois que le composant enfant a modifié les données, il souhaite transmettre les données au composant parent. Vous pouvez utiliser la méthode d'émission.

Comment avez-vous connu vuex ? vuex peut être compris comme un modèle ou un cadre de développement. Par exemple, PHP a thinkphp, java a spring, etc.

Gérez de manière centralisée les modifications apportées aux composants du pilote via le statut (source de données) (comme le conteneur IOC de Spring gérant de manière centralisée les beans).

Le statut au niveau de l'application est concentré dans le magasin ; la façon de modifier le statut est de soumettre des mutations, ce qui est une chose synchrone ; la logique asynchrone doit être encapsulée dans des actions.

Qu'est-ce que vue-loader ? Quelles sont les utilisations de son utilisation ?

Un chargeur qui analyse les fichiers .vue et convertit template/js/style en modules js.

Objectif : js peut être écrit en es6, le style peut être scss ou moins, le modèle peut être ajouté avec jade, etc.

Veuillez me dire l'utilisation de chaque dossier et fichier dans le src répertoire dans le projet vue.cli ?

Le dossier Assets est destiné aux ressources statiques ; les composants sont destinés aux composants ; le routeur est destiné à définir les configurations liées au routage ; app.vue est un composant principal de l'application ; main.js est le fichier d'entrée

Comment utiliser des composants personnalisés dans vue.cli ? Avez-vous rencontré des problèmes ?

Étape 1 : Créez votre fichier de composant (smithButton.vue) dans le répertoire des composants. Le script doit exporter la valeur par défaut {

Étape 2 : Importez-le dans la page (composant) que vous devez utiliser. ：import smithButton from '../components/smithButton.vue'

Étape 3 : Injectez-le dans l'attribut composants du sous-composant de vue, composants :{smithButton}

Étape 4 : Utilisé dans la vue du modèle,
Le problème est : nommer smithButton, lors de son utilisation, il s'agit de smith-button.

Parlez de votre compréhension de la compilation de modèles Vue.js ?

En bref, il est d'abord converti en arbre AST, puis la fonction de rendu résultante renvoie VNode (le nœud DOM virtuel de Vue)

Étapes détaillées :

Tout d'abord, le modèle est compilé dans un arbre de syntaxe AST (arbre de syntaxe abstraite, qui est une représentation arborescente de la structure syntaxique abstraite du code source) via le compilateur compile est la valeur de retour. de createCompiler, qui est utilisé pour créer le compilateur. De plus, compile est également responsable de la fusion des options.

Ensuite, l'AST obtiendra la fonction de rendu via la génération (le processus de conversion de l'arbre de syntaxe AST en une chaîne de fonction de rendu). La valeur de retour de render est VNode est le nœud DOM virtuel de Vue. qui contient (nom de l'étiquette, sous-nœuds, texte, etc.)

Enregistrement de l'historique de Vue

historique Combien de pas en avant ou en arrière dans la notice

Quelle est la différence entre vuejs, Angularjs et React ?

1. Différences par rapport à AngularJS

Mêmes points :

les deux instructions de support : instructions intégrées et instructions personnalisées.

Les deux prennent en charge les filtres : filtres intégrés et filtres personnalisés.

les deux prennent en charge la liaison de données bidirectionnelle.

Ne prend pas en charge les navigateurs bas de gamme.

Différences :

1. AngularJS a un coût d'apprentissage élevé, comme l'ajout de la fonctionnalité d'injection de dépendances, tandis que les API fournies par Vue.js lui-même sont relativement simples et intuitives.

2. En termes de performances, AngularJS s'appuie sur une vérification sale des données, donc plus il y a d'observateurs, plus cela devient lent.

Vue.js utilise l'observation basée sur le suivi des dépendances et utilise des mises à jour de file d'attente asynchrones. Toutes les données sont déclenchées indépendamment.

Pour les grosses applications, cette différence d'optimisation est assez évidente.

2. Différences avec React

Points similaires :

React utilise une syntaxe JSX spéciale et Vue.js recommande également d'écrire un format de fichier spécial .vue dans le développement de composants. certaines conventions sur le contenu des fichiers, et les deux doivent être compilées avant utilisation.

L'idée centrale est la même : tout est un composant, et les instances de composants peuvent être imbriquées.

fournissent tous des fonctions de hook raisonnables, permettant aux développeurs de personnaliser leurs besoins.

n'a pas de fonctions AJAX, Route et autres intégrées dans le package principal, mais est chargé en tant que plug-in.

Prend en charge les fonctionnalités mixins dans le développement de composants.

Différences :

React s'appuie sur Virtual DOM, tandis que Vue.js utilise des modèles DOM. Le DOM virtuel utilisé par React effectuera des vérifications approfondies sur les résultats rendus.

Vue.js fournit des instructions, des filtres, etc. dans le modèle, qui peuvent faire fonctionner le DOM très facilement et rapidement.

Questions d'entretien sur le cycle de vie de vue

Qu'est-ce que le cycle de vie de vue ?

Le processus allant de la création à la destruction d'une instance Vue est le cycle de vie. C'est-à-dire 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 → le rendu, la désinstallation, etc. Nous appelons cela le cycle de vie de Vue.

Quel est le rôle du cycle de vie de vue ?

Il possède plusieurs hooks d'événements 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.

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

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

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

Les hooks beforeCreate, créés, beforeMount, montés seront déclenchés lorsque la page est chargée pour la première fois

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

Le rendu DOM a été terminé en monté

Décrivez brièvement à quels scénarios chaque cycle est adapté ?

Quelques façons d'utiliser les hooks de cycle de vie : beforecreate : Vous pouvez ajouter ici un événement de chargement, qui est déclenché lorsque l'instance est chargée. créée : L'événement lorsque l'initialisation est terminée est écrit ici , comme se terminer ici Pour le chargement d'événements, les requêtes asynchrones peuvent également être appelées monté ici : Monter les éléments et obtenir les nœuds DOM mis à jour : Si les données sont traitées uniformément, écrivez la fonction correspondante ici avantDestroy : Vous pouvez créer une boîte de confirmation pour confirmer le stop event nextTick : Après la mise à jour des données, faites fonctionner immédiatement dom

les arguments sont un pseudo-tableau, il n'y a pas d'interface de traversée et ne peuvent pas être parcourus

Que sont et les différences entre cancas et SVG

SVG

SVG est un langage qui utilise XML pour décrire les graphiques 2D.
SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un gestionnaire d'événements JavaScript à un élément.
En SVG, chaque forme dessinée est considérée comme un objet. Si les propriétés d'un objet SVG changent, le navigateur peut automatiquement reproduire le graphique.

Canvas

Canvas dessine des graphiques 2D via JavaScript.
Le canevas est rendu pixel par pixel.
Dans Canvas, une fois qu'un graphique est dessiné, il n'attire plus l'attention du navigateur. Si sa position change, la scène entière doit être redessinée, y compris tous les objets qui auraient pu être recouverts par des graphiques.

Comparaison de Canvas et SVG

Canvas

Dépend de la résolution
Ne prend pas en charge les gestionnaires d'événements
Faibles capacités de rendu de texte
Possibilité d'enregistrer l'image résultante au format .png ou .jpg
Idéal pour les jeux à forte intensité graphique où de nombreux objets seront fréquemment redessinés

SVG

Indépendant de résolution
Prend en charge les gestionnaires d'événements
Idéal pour les applications avec de grandes zones de rendu (telles que Google Maps)
Une complexité élevée ralentira le rendu (toute application qui utilise le DOM de manière excessive sera mécontente)
Ne convient pas au jeu applications

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé de la méthode de transfert de données vue

Résumé Nodejs de la méthode de traitement du cryptage des mots de passe

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!