VUE生命周期详解

VUE生命周期

提示：学会VUE生命周期，就能够得心应手的控制你的页面！简直不要太棒了！！

---

---

前言

本章节主要讲述VUE生命周期的整个历程，这很重要，只有了解了整个生命周期，在写代码的时候才会清楚的知道什么时候该触发什么事件，逻辑才会更加的清晰

---

一、VUE生命周期是什么？

vue实例创建到销毁的整个过程就是vue的生命周期。vue的所有功能的实现都是围绕它的整个生命周期进行的，在生命周期内的不同阶段调用对应的钩子函数，进而实现组件数据管理和DOM渲染两大重要功能

---

二、生命周期钩子函是什么？

生命周期函数钩子如下：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

这些生命周期钩子函数，会在下面的生命周期历程中详细说明它的使用场景

---

三、生命周期历程

• 从vue实例创建开始生命周期就诞生了，从创建到消亡整个生命周期历程中，它会依次经历以下几件人生大事：

1. 实例对象创建
2. 实例初始化
3. 模板编译
4. 虚拟DOM挂载
5. 监听数据改变
6. 销毁

• 生命周期走到每个阶段的每个节点时，会对应的调用执行生命周期的钩子函数，调用执行完毕后，继续进行下一个生命阶段，直至最终销毁，整个生命周期也就结束了

• 生命周期历程总的大致分为三个阶段：创建阶段、运行阶段、销毁阶段。下面对各阶段进行详细说明
  （下面的说明，从头到脚依次仔细读，我相信vue的生命周期就能够很好的理解了！！）

1、创建阶段

当我们new一个vue实例对象时，就立马进入了创建阶段，之后会立即初步初始化该实例对象（注意此次初始化完成后，该实例对象仅仅只是拥有了一些默认的生命周期钩子函数和默认的事件，data和methods都还没有被初始化） 代码如下（示例）：

<!-- DOM -->
<div id="app">
    <h2 id="h2">{
   {
   msg}}</h2>
    <button @click="msg='no'">修改data</button>
</div>

//vue实例对象
var vm