yuanyuanbyte / Blog

圆圆的博客,预计写七个系列:JavaScript深入系列、JavaScript专题系列、网络系列、Webpack系列、Vue系列、JavaScript基础系列、HTML&CSS应知应会系列。
311 stars 126 forks source link

Vue系列之对 vue 生命周期的理解 #54

Open yuanyuanbyte opened 2 years ago

yuanyuanbyte commented 2 years ago

本系列的主题是 Vue,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末

如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。

谈谈你对 Vue 生命周期的理解

🔸 生命周期是什么

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

🔸 生命周期示意图

在这里插入图片描述

生命周期示意图备注:

在这里插入图片描述

生命周期示意图详解:

在这里插入图片描述

🔸 各个生命周期的作用

生命周期 描述
beforeCreate 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
created 实例已完成对选项的处理,这些已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,真实 dom 还没有生成,$el 还不可用
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用
mounted 实例被挂载后调用,在当前阶段,真实的 dom 挂载完毕,数据完成双向绑定,可以访问到 dom 节点
beforeUpdate 在数据发生改变后,DOM 被更新之前被调用
update 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
activited keep-alive 专属,被 keep-alive 缓存的组件激活时调用
deactivated keep-alive 专属,被 keep-alive 缓存的组件失活时调用
beforeDestory 实例销毁之前调用
destoryed 实例销毁后调用

查看全部文章

博文系列目录

交流

各系列文章汇总:https://github.com/yuanyuanbyte/Blog

我是圆圆,一名深耕于前端开发的攻城狮。

weixin