简单讲一下Vue的生命周期和钩子函数

最新推荐文章于 2024-08-30 21:00:00 发布

程序员_小张

最新推荐文章于 2024-08-30 21:00:00 发布

阅读量730

点赞数 3

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/code_dragonL/article/details/109294212

版权

本文详细解析了Vue的生命周期和钩子函数，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等关键阶段，以及数据响应式和DOM操作的相关知识点。

摘要由CSDN通过智能技术生成

Vue中的生命周期和钩子函数

首先，先给大家看一张图，这张图清晰的给出了Vue中每一个Vue实例被创建前的初始化过程。接下来，我就给大家逐个进行讲解。
生命周期函数流程图

下面我们从源码方面详细解释一下这张图

1.实例化

在这里插入图片描述显而易见，这个就是实例化。实例化之后，会执行以下操作。根据Vue的源码，我们可以看到Vue的本质就是一个function，new Vue的过程就是初始化参数、生命周期、事件等一系列过程。

2.初始化事件生命周期函数
在这里插入图片描述
首先就是初始化事件和生命周期函数。这时候，这个对象身上只有默认一些生命周期函数和默认的事件，其他的东西都未创建。

3.beforeCreate：Vue实例创建前
在这里插入图片描述
接着就是beforeCreate（创建前）执行。但是这个时候拿不到data里边的数据。data和methods中的数据都还没初始化。

4.注射响应
在这里插入图片描述

injections（注射器）reactivity（响应）给数据添加观察者。

5.created：Vue实例创建后（请求数据）
在这里插入图片描述

created创建后执行。因为上边给数据添加了观察者，所以现在就可以访问到data中的数据了。这个钩子也是常用的，可以请求数据了。如果要调用methods中的方法或者操作data中的数据，要在created里操作。又因为请求数据是异步的，所以发送请求宜早不宜迟，通常在这个时候发送请求。

6.是否存在el（元素）
在这里插入图片描述
el指明挂载目标。这个步骤就是判断一下是否有写el，如果没有就判断有没有调用实例上的$mount(")方法调用。也就是下一张图。

7.判断是否有template

判断是否有template。