13 questions d'entretien Vue frontale à partager (avec analyse des réponses)

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

1. Comment vue-router passe-t-il les paramètres
2.v- Inconvénients. et des solutions pour utiliser if et v-for ensemble
3.Quelles opérations sont généralement effectuées dans beforeDestroyed
4.Comment transférer des valeurs​​entre les composants vue au même niveau
5.Comment le parent Les composants dans Vue obtiennent-ils des composants enfants ? Propriétés et méthodes
6. La différence entre watch et calculé
7. L'ordre des cycles de vie des composants parents et enfants dans Vue
8. Le composant parent dans Vue peut-il surveiller le cycle de vie du composant enfant
9. Quels sont les principaux modificateurs d'événements dans Vue ? Quelles sont leurs fonctions respectives
10. Présentez ce qu'est
11. Peut surveiller le comportement pop du tableau
12 Comment la montre met-elle en œuvre une surveillance approfondie
13. . Comment résoudre le problème du non-rendu de la page dans vue
(Partage de vidéos d'apprentissage : Tutoriel vidéo Vue)

Analyse des questions d'entretien Vue

1. vue-router a deux façons de transmettre les paramètres

(1) Transmettre les paramètres de manière dynamique, par exemple en configurant le chemin dans le fichier router.js. : path: ' /detail/:id' Passez ensuite this.$route.params.id dans le composant pour obtenir

(2) Passez le paramètre

<router-link :to={
params: {
	x: 1
	}
} />

dans le lien du routeur. tag et transmettez également ceci .$route.params obtient

Remarque : La façon de transmettre les paramètres via le lien du routeur ici est de transmettre les paramètres implicitement

2 , v-if et v Inconvénients et solutions de l'utilisation de -for ensemble

Puisque v-for a une priorité plus élevée que v-if, il ira à v-if une fois à chaque boucle, et v- si est passé Créez et détruisez des éléments DOM pour contrôler l'affichage et le masquage des éléments, de sorte que les éléments seront constamment créés et détruits, provoquant un décalage de page et une dégradation des performances.

Solution : enveloppez un élément dans la couche externe ou interne de v-for et utilisez v-if

3 Quelles opérations sont généralement effectuées dans beforeDestroy

beforedestoryed est un cycle de vie qui est exécuté avant que le composant ne soit détruit. Dans ce cycle de vie, nous pouvons effacer les fonctions de rappel ou les minuteries, effacer les éléments dom inutilisés, etc.

4. pour transférer des valeurs entre composants de même niveau

1. S'il s'agit d'un composant frère, la valeur peut être transférée via l'élément parent en tant que composant intermédiaire 2. En créant un bus, le la valeur peut être transférée

// 创建一个文件，定义bus中间件，并导出
const bus = new Vue()
// 在一个组件中发送事件
bus.$emit('事件名称', 传递的参数)
// 在另一个组件中监听事件
bus.$on('事件名称', 得到传过来的参数)

5. Comment le composant parent dans Vue obtient-il les propriétés et les méthodes du sous-composant

Vue obtient les propriétés et les méthodes du sous-composant par définissant l'attribut ref sur le sous-composant. Le code est le suivant :

// 这里是父组件
<templete>
	<child ref="child"/>
</templete>
<script>
method: {
	getChild () {
		this.$refs.child.属性名（方法名）
	}
}
</script>

6. La différence entre watch et calculé

La fonction de watch est généralement affectée par une seule valeur. le changement de plusieurs valeurs et quand il pourra surveiller le changement de cette valeur, il exécutera une fonction de rappel, à ce moment nous pouvons faire un traitement logique dans cette fonction de rappel

calculé consiste à dériver un nouveau valeur basée sur la valeur dépendante, et il peut y avoir plusieurs valeurs dépendantes, uniquement lorsque la valeur dépendante Lorsqu'un changement se produit, le calcul sera réexécuté

[Recommandations associées : Tutoriel vue.js]

7. Le cycle de vie des composants parent et enfant de la vue Séquence

1), séquence du processus de rendu :

composant parent avantCréer( ) -> composant parent créé() -> composant parent beforeMount() -> composant enfant beforeCreate () -> composant monté()

2), séquence du processus de mise à jour :

Processus de mise à jour du composant parent :
Composant parent avant la mise à jour() -> >Processus de mise à jour du composant enfant :

3), processus de destruction

Le composant parent peut-il surveiller le cycle de vie du composant enfant, le code de surveillance via @hook : est le suivant :

// 这里是父组件
<template>
	<child
	@hook:mounted="getChildMounted"
	/>
</template>
<script>
method: {
	getChildMounted () {
		// 这里可以获取到子组件mounted的信息
	}
}
</script>

.stop : empêcher les événements de bouillonner

.once : les événements ne sont exécutés qu'une seule fois
.self : lier les événements On en soi, cela équivaut à empêcher les événements de bouillonner
.prevent : empêcher les événements par défaut
.caption : utilisé pour la capture d'événements

keep-alive est utilisé pour la mise en cache des composants. Il ne sera exécuté qu'une seule fois et ne sera pas détruit. Les composants encapsulés par keep-alive n'ont pas de méthodes telles que create et beforeDestroyed, mais ils ont des méthodes activées et désactivées.

对于有返回值的数据，watch就能监听到，比如数组的pop，push, unshift,map等行为。

12、watch如何实现深度监听

watch: {
	obj: {
		handler: function(val) {
		},
		deep: true // 深度监听
	}
}

13、vue中如何解决页面不重新渲染问题