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 :

Composant parent beforeUpdate() -> Composant enfant beforeUpdate( ) -> Composant enfant mis à jour() -> Composant parent mis à jour()

3), processus de destruction

Composant parent beforeDestroy() -> Composant enfant beforeDestroy() -> Composant enfant détruit () -> Composant parent détruit()

8. le cycle de vie du composant enfant ?

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>

9. Quels sont les principaux modificateurs d'événements dans Vue ? Quelles sont les fonctions ?

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

.native : lier les événements natifs

.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

10. Présenter ce qu'est le keep-alive

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.

11. La montre peut-elle surveiller le comportement pop du tableau

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

12、watch如何实现深度监听

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

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

(1).修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值') (2).使用this.$forceUpdate()方法可重新渲染页面

更多编程相关知识，请访问：编程视频！！

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!