01.VUE生命周期的理解和案例

目录

前言

一、什么是VUE的生命周期？

二、生命周期图解

2.生命周期的三个阶段

---

---

前言

刚开始使用vue的时候还是简单的理解了一下vue的生命周期，基本会用，但是区分八个钩子的理解性不强，特别是created和mounted，面试还特别爱问，因此，重新再看视频学习vue的生命周期，再一遍重新理解了生命周期，还是有很多的收获的。

---

一、什么是VUE的生命周期？

官方：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

二、生命周期图解

2.生命周期的三个阶段

1.初始化阶段

beforeCreate()

解释：vue实例刚刚被创建，此时的data和methods还没有被初始化（所以此时不能访问数据和方法）

例子：

created()：在调用该方法的时候，是最早能访问到数据和方法的钩子

例子：

beforeMount()：已经完成了模版的编译，但是还没有挂载到页面当中，也就是说此时的代码都是存在着{{msg}}的，只是生成了一个模版。

例子：

mounted()：将编译好的模版挂载到页面当中去，此时显示的是完整的网页（数据可以正常显示）

例子：

2.运行中阶段(数据改变)

beforeUpdate()：在调用该钩子的时候，表示Vue实例当中保存的数据被修改了。注意点：只有保存的数据被修改了才会调用该钩子函数，否则不会调用；此外在调用钩子函数的时候，数据已经更新了，但是界面还没有更新。

例子：（修改我表示修改数据后执行的方法）

 （第二份图是：修改数据后，旧数据还在显示）

Update()：在调用该钩子的时候，表示实例中保存的数据被修改了，并且界面也同步了，修改了数据。也就是说，数据和界面同步之后就会调用。

例子：

3.销毁阶段

deforeDestroy()：最后一次数据和方法出现的钩子函数位置，还可以取到并且使用方法。

destroyed()：数据还有方法销毁，访问不到。

注意：生命周期钩子——生命周期事件——生命周期函数

注：生命不息，学习不止