Vue生命周期钩子详细介绍(面试必问)

作用: 特定的时间点，执行特定的操作

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

vue声明周期钩子: vue实例从加载到销毁过程中会执行的一些回调函数

声明周期: vue实例从创建到销毁的过程. (vue实例创建.dom树完成渲染)

钩子: 回调函数

vue声明周期4个阶段8个钩子

阶段一: 创建 (创建vue实例)

beforeCreate created

阶段二: 挂载 (data数据渲染到el)

beforeMount mounted

阶段三: 更新 (检测data变化并更新el)

beforeUpdate updated

阶段四: 销毁 (接触data与el的绑定关系)

beforeDestroy destroyed

1.Vue-初始化阶段

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

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

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

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

5. created – 生命周期钩子函数被执行, 实例创建(能获取data, 不能获取真实DOM)

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

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

2.Vue-挂载阶段

1.template选项检查

        有 - 编译template返回render渲染函数

        无 – 编译el选项对应标签作为template(要渲染的模板)

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

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

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

5.真实DOM挂载完毕

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

3.Vue-更新阶段

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

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

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

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

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

4.Vue-销毁阶段

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

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

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

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

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

 vue第一次加载的时候会执行哪几个钩子

1. 创建vue实例之前: beforeCreate

2. 创建vue实例之后: created

3. 挂载前: beforeMount

4. 挂载后(初始渲染):mounted

vue常用钩子

• created: 完成data数据创建 (一般用于axiso请求网络数据)

• mounted: 完成初始渲染(Ibanez用于操作dom)

注意点: vue生命周期钩子不能使用箭头函数

• function函数: 钩子中的this指向 vue实例

• 箭头函数: 钩子中的this指向window