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

[yuanyuanbyte]

本系列的主题是 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	实例销毁后调用

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

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

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