VUE文件生命周期超详细介绍

vue提供了大量的钩子函数，来配合每个Vue实例创建，这就涉及到生命周期这个概念。

vue生命周期牵涉到vue实例对象从创建之初到销毁的过程，vue所有的功能都是围绕其生命周期进行的，不同的周期内调用不同的钩子函数可以实现数据管理和DOM渲染两大重要功能。

一、生命周期官方文档图

二、钩子函数的详细介绍

在上图，我们可以清楚地看到Vue整个项目周期和他所提供的钩子函数的作用。

---

总共分为8个阶段创建（create）前/后，载入（mount）前/后，更新（update）前/后，销毁（destory）前/后

创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，
还未初始化。在created阶段，vue实例的数据对象data有了，el为undefined，还未初始化。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
在mounted阶段，vue实例挂载完成，data.message成功渲染

更新前/后：当data变化时，会触发beforeUpdate和updated方法

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了
事件监听以及和dom的绑定，但是dom结构依然存在

---

2.1 beforeCreate（创建前）

此阶段为初始化之后，此书的数据观察和事件机制都没形成，不能获得DOM节点。刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳。

获取不到data里的数据，，method是、computed等设置的方法都不用用，获取不到template中设置的dom。

2.2 created（创建后）

此阶段vue实例已经创建，仍然不能获取DOM元素。这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数。接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染

可以获取到data里的数据，可以更改data的数据，获取不到template中设置的dom，可以调用methods里的方法，可以获取computed中的计算属性

2.3 beforeMount（载入前）

此阶段，仍然得不到具体的DOM元素，但vue挂载的根节点已经创建，相关的render函数首次被调用（虚拟DOM），下面vue对DOM的操作将围绕根元素继续进行。实例已经完成如下配置：编译模板，把data里面的数据和模板生成HTNL，完成了二el、data初始化，此时还没有挂载html页面上。

2.4 mounted（载入后）

此阶段数据和vue单个文件DOM都已经被渲染出来，即模板中的HTML渲染到HTML页面中，一般异步请求都是在这里执行。mounted只会执行一次。

2.5 beforeUpdate（更新前）

此阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没有立即更新数据，但DOM中的数据会改变，这是VUE双向数据绑定的作用。

2.6 updated（更新后）

此阶段，DOM会和更改过的内容同步。

2.7 beforeDestory（销毁前）

此阶段一般执行this.$destroy()，一些善后工作，例如清除计时器、清除非指令绑定的事件等。这里还能用this来获取实力

2.8 destroyed（销毁后）

三、