Vue实例的生命周期

---

简介

从Vue实例创建、运行、到摧毁期间，总是伴随着各种各样的事件，这些事件被统称为生命周期

初始化阶段

• beforeCreate（创建前）：实例刚在内存中被创建出来，此时，还没有创建好data和methods属性。vue实例的挂载元素el、data和methods中的数据都还没有进行初始化，还是一个 undefined状态
  
• Create（创建后） ：此时data和methods已经被初始化了，可以调用methods里的方法，为data里的数据赋值据，el还没有，也没有挂载dom，此时还没有编译模板
  

模板编译阶段

将el所指向的内容（div）编译成一个模板，以后会对这个模板做些相关操作

判断vue实例中是否有el选项，有→继续，没有el→停止编译直到再该vue实例上调用vm.$mounted(el)→继续
判断vue实例中是否有template参数选项,有→则将其作为模板编译成render函数
没有template→将外部HTML作为模板编译
(template中的模板优先级要高于outer HTML的优先级)

挂载阶段

• beforeMount（载入前） ：此时已经完成了模板的编译，但是还没有挂载到页面中
• Mount（载入后） ：将编译的模板挂载到页面中

输出结果：
{{msg}}
ok

更新阶段

• beforeUpdate（更新前） ：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步
• Updated（更新后） ：updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
  

点击button按钮后，beforeupdate打印结果如下：

点击button按钮后，updated打印结果如下：

销毁阶段

• beforeDestroy（销毁前） ： vue实例在销毁前调用，在这里还可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件
• destroyed（销毁后） ：vue实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

小结

vue第一次页面加载会触发哪几个钩子函数？
beforeCreate、created、beforeMount、mounted

DOM 渲染在哪个周期中就已经完成？？
mounted

mounted阶段真实DOM存在了嘛?
存在，beforeMount：完成模板编译，虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。mounted ： 将编译好的模板挂载到页面 (虚拟DOM挂载) ，可以在这进行异步请求以及DOM节点的访问，在vue用$ref操作