vue生命周期 钩子函数

vue实例的生命周期：从创建到销毁的整个过程

1、钩子函数

vue框架内置函数，随着组件的生命周期阶段，自动执行

使用钩子函数 可以知道vue生命周期到达了什么阶段

作用：在特定的时间点执行特定的操作

分类：4大阶段8个方法（面试题）

2、初始化阶段

1、new Vue()-vue实例化(组件也是一个小vue实例)

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

3、beforeCreate(初始化data/methods之前)-生命周期钩子函数执行

4、Init injection&reactivity-Vue内部添加data和methods等

5、create(初始化后-created执行)-生命周期钩子函数被执行，实例创建

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

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

没有. 调用$mount()方法

有, 继续检查template选项

结论:(兜底记住)

1、在created里操作data里变量-发起网络请求（网页打开就要数据，从这里发起请求）

2、created函数触发能获取到data不能获取真实dom

3、挂载阶段

补充：

真实dom和模板标签(template里写的叫模板标签)：

template(模板标签) - vue (vue-template-compiler的包)编译(转换翻译)-解析v-for/v-model/v-if/v-html/...(vue语法)

->虚拟dom（一个Js对象，里面保存了关键的属性和信息）

->插入（更新）到真实dom上（网页上）

虚拟dom的好处：

1、虚拟dom的关键属性要比真实dom少（一个标签对象有200+属性）-后期做对比找差异快的多

2、操作真实dom和虚拟dom那个快？虚拟dom(本身就是一个Js对象)

---

1.template选项检查

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

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

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

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

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

5.真实DOM挂载完毕

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

结论：(兜底记住)

mounted里获取真实dom，操作真实dom

4、更新阶段

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

2.beforeUpdate(更新之前) – 生命周期钩子函数被执行

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

4.updated (真实dom更新后)– 生命周期钩子函数被执行

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

结论(兜底记住)：

updated里获取更新后的真实dom

5、销毁阶段

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

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

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

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

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

总结：(v-if或者组件实例this.$destroyed())->此组件被销毁

使用：销毁组件内计时器/定时器/全局事件(释放组件占用的全局资源)

如果组件被缓存，组件就不会执行销毁/初始化创建的方法

这时需要知道组件被失去激活/激活时可使用以下两个钩子函数

6、activated  

 --- 组件被激活状态

7、deactivated

--- 组件被失去激活状态

注意：第一次创建时activated也会被执行