Résumé d'apprentissage de Vue - quel est le cycle de vie de vue et des questions d'entretien courantes

Cycle de vie de la vue

  • Cycle de vie : Le processus de la création à la destruction de chaque instance de vue est le cycle de vie de cette instance de vue. Dans ce processus, il est passé par une série de processus depuis la création, l'initialisation des données, la compilation de modèles, le montage de Dom, le rendu → la mise à jour → le rendu, la désinstallation, etc./
  • Fonction de crochet : une fonction qui n'a pas besoin d'être déclenchée et qui est exécutée par elle-même est appelée une fonction de crochet.

Il y a 10 hooks de cycle de vie dans Vue2.0

beforeCreate - initialisation de l'instance

什么都是undefined

créé----l'instance est créée

Vue 实例观察的数据对象data已经配置好,已经可以得到app.message的值
属性和方法的运算
watch/event 事件回调
$el还是undefined

beforeMount — appelé avant le montage

相关的 render 函数首次被调用。
data和el均已经初始化
找到了挂载点el,el的值为“虚拟”的元素节点
{
    
    {
    
    }},v-for还没有解析

monté----Rappel pour l'exécution de l'achèvement du montage

el 被新创建的 vm.$el 替换
数据解析完成,页面初始化好了
运用场景:请求数据(ajax)、打开计时器、给window|document添加事件

beforeUpdate----Mettre à jour le callback exécuté avant

Se produit avant que le DOM virtuel ne soit restitué et corrigé. Vous pouvez modifier davantage l'état de ce crochet, ce qui ne déclenchera pas de processus de re-rendu supplémentaire

页面更新之前,不是数据变化之前,所以拿到的是新值。
目前学到的知识中,只有data中的数据变了,才会触发更新期的执行

mise à jour ----- fonction de crochet déclenchée après la mise à jour

Ce hook est appelé après les re-rendus et les correctifs du DOM virtuel en raison de modifications de données. Lorsque ce crochet est appelé, le composant DOM a été mis à jour, vous pouvez donc maintenant effectuer des opérations qui dépendent du DOM

activé---- appelé lorsque le composant keep-alive est activé

désactivé : appelé lorsque le composant keep-alive est désactivé.

beforeDestroy----- Appelé avant la destruction de l'instance

当vm.$destroy()触发了,就会进入销毁期
销毁之前:清除计时器、清除window|document上的事件

détruit ---- Appelé après la destruction de l'instance de Vue

调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

Résumer

1、除了beforeCreate和created钩子之外,其他钩子均在服务器端渲染期间不被调用
### 

2、在created钩子中可以对data数据进行操作,这个时候可以进行ajax请求将返回的数据赋给data
3、在mounted钩子对挂载的dom进行操作
4、在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了,如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发

Questions d'entretien courantes sur le cycle de vie de vue

1. Parlez de votre compréhension du cycle de vie de Vue ?

(1)生命周期是什么?
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

(2)各个生命周期的作用
beforeCreate 组件实例被创建之初,组件的属性生效之前

created 组件实例已经完全创建,属性也绑定,但真实 dom还没有生成,$el 还不可用

beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用 

mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子 beforeUpdate 组件数据更新之前调用,发生在虚拟 DOM 打补丁之前

update 组件数据更新之后

beforeDestory 组件销毁前调用

destoryed 组件销毁后调用

2. À quelle étape l'ajax démarre-t-il lorsqu'une page arrive ?

可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。(本人常放置到mounted中可以操作dom,当然也可以放到created中)

3. La séquence d'exécution des fonctions de hook du cycle de vie des composants parent et enfant de Vue

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类
为以下 4 部分:

加载渲染过程:
	父 beforeCreate -> 父 created -> 父 beforeMount -> 子beforeCreate -> 子 created -> 子 beforeMount -> 子mounted -> 父 mounted

4. Parlez-moi de votre compréhension du keep-alive ?

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染 ,其有以下特性:
对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated;一般结合路由和动态组件一起使用,用于缓存组件;


5. Le maintien en vie déclenchera-t-il le cycle de vie à plusieurs reprises ? Comment implémenter la logique si vous souhaitez déclencher à plusieurs reprises ?

不会重复触发生命周期,如果想要重复触发的逻辑写在activated deactivated.

Je suppose que tu aimes

Origine blog.csdn.net/m0_62209297/article/details/125142088
conseillé
Classement