Vue生命周期钩子介绍

 

 

• vue生命周期钩子官方文档：

  • 官方文档图解介绍：生命周期图示

  • 官方文档详细介绍：vue生命周期钩子介绍

• vue生命周期钩子介绍 ： vue从创建到销毁过程中，会执行的一些回调函数

  • 钩子 ： 一种回调函数

    • 例如

      • window.onload = function(){ dom加载完毕，外部资源加载完毕就执行 }

  • 生命周期 ： vue实例从出生到扑街的过程

    • 出生：

      • 创建vue实例

      • 创建data数据

      • 创建el挂载点

      • 将data数据渲染到el挂载点

    • 扑街

      • vue实例被销毁

        • 这里销毁不是指vue实例变成了null，也不是删除dom,而是vue不工作了,指解除data与el的关联

          • 说人话：修改了data，页面不会被渲染

• 注意点

  • 根据官网文档介绍 ： 每一个生命周期钩子中的this都是指向vue实例

  • 所以，生命周期钩子不能是箭头函数

vue的生命周期钩子分为四大阶段,8个方法

• 初始化

• 挂载

• 更新

• 销毁

执行顺序	钩子函数	执行时机
1	beforeCreate(){}	vue实例创建了，但是el和data还没有创建 （准备创建data） 底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）
2	created() {}	data数据创建了，但是el挂载点还没有创建 (准备创建el) 底层：初始化data中的数据和methods中的方法 /* 常用: 最早可以获取data数据的钩子， 一般在这个钩子发送ajax */
3	beforeMount() {}	el挂载点创建了，但是data数据还没有渲染（准备渲染中） 底层：创建el挂载点，并且生成虚拟DOM
4	mounted() {}	data数据 第一次 渲染完毕 (完成初始渲染) 底层：将虚拟dom渲染成真实DOM /* 常用: (完成dom的初始(第一次)(没更新之前的)渲染)最早可以操作DOM的钩子,因为此时dom已经加载出来了 */
5	beforeUpdate() {}	检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) 会执行多次
6	updated() {}	变化后的data数据 ，完成渲染到页面 （完成重新渲染）会执行多次
7	beforeDestroy() {}	vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染 底层 ： 解除 事件绑定、侦听器、组件
8	destroyed() {}	vue实例已经销毁