Vue的生命周期

102 阅读1分钟

Vue的生命周期

概念:Vue的生命周期是指Vue实例, 创建到销毁的过程

一、怎样判断Vue生命周期到达了什么阶段?

判断Vue生命周期到达了什么阶段,这时就需要使用到钩子函数,钩子函数是Vue 框架内置函数,随着组件的生命周期阶段,自动执行

Vue的生命周期共分为4大阶段,8个钩子函数,分别是初始化阶段、挂载阶段、更新阶段、销毁阶段

阶段方法名方法名
初始化beforeCreatecreated
挂载beforeMountmounted
更新beforeUpdateupdated
销毁beforeDestroydestroyed

以下放上官网的图解地址:

cn.vuejs.org/v2/guide/in…

1、初始化阶段

含义讲解:

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

没有. 调用$mount()方法

有, 继续检查template选项

image.png

image.png

如图运行后可得:created函数触发,能获取data,可用于发送axios请求。

2、挂载阶段

含义讲解:

1.虚拟DOM挂载成真实DOM之前

2.beforeMount – 生命周期钩子函数被执行

3.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

4.真实DOM挂载完毕

5.mounted – 生命周期钩子函数被执行

image.png

如图运行后可得:mounted函数触发,可以获取真实DOM,created函数里,不能获取真实DOM

3. 更新阶段

含义讲解:

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

image.png

如图运行后可得:当数据发生变化并更新页面后,才执行updated钩子函数,同样beforeUpdate函数不能获取到更新后的DOM,updated才可以获取到更新后的DOM

4.销毁阶段

含义讲解:

1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行

image.png

如图运行后可得:destroy函数会在实例被销毁时触发,一般用于手动消除计时器/定时器/全局事件。

以上是关于Vue生命周期的一些介绍,另外还有三个钩子函数,可能不是很详细,只做简单总结,可自行去Vue官网查看相关内容。=_=!!!