vue生命周期

Vue在被创建的时候都要经过一系列的初始化过程，这个初始化过程例如设置数据监听，编译模板，将实例挂载Dom并在数据变化时更新Dom。
在这个过程中也会运行生命周期钩子函数。

生命周期钩子函数：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestory
• destoryed

1.beforeCreate 和 created之间的生命周期

初始化事件，进行数据的观测，可以看到当created的时候已经和data绑定（所以当data改变的时候，视图也会进行变化）

image.png

2. created 和 beforeMount之间生命周期

image.png

created和beforeMount之间可以看到需要进行判断是否有el对象，有则继续向下编译，没有的话则停止编译，直到vue实例上调用vm.$mount(el)。
例如 注释掉

el:'#app'

则运行到created这个生命周期就停止运行了，
但是如果这个时候在vue实例上调用，就会继续向下执行

vm.$mount(el) // 这个el就是挂载的dom节点

template有否对于生命周期的影响
(1) 存在template时，将其作为模板编译成render函数
(2) 不存在时，则用外部HTML作为模板编译
可以看出temlate优先级要比外部HTML高
vue对象中还存在render函数，以createElement作为参数，然后做渲染操作，可直接嵌入jsx
渲染优先级顺序
render函数 > template >外部HTML

3.beforeMount和mounted之间生命周期

image.png

可以看到beforeMount之后，给vue实例添加$el对象，并且替换掉挂载的dom元素

4.beforeUpdate和updated之间生命周期

image.png

当data变化时，会触发到对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

5.beforeDestory和destoryed

image.png

beforeDestory钩子函数在实例销毁前调用，在这一步，实例仍完全可用。
destoryed在实例销毁后调用，调用后，vue指定的所有东西都会解绑定，所有监听器会被移除，子实例也完全被销毁。

在vue-cli生成的项目中，打印生命周期前后如下：

 beforeCreate() {
    console.group('------beforeCreate创建前状态------');
    console.log('%c%s', 'color:red', 'el     :' + this.$el); //undefined
    console.log('%c%s', 'color:red', 'data   :' + this.$data); //undefined
  }
  created() {
    console.group('------created创建完毕状态------');
    console.log('%c%s', 'color:red', 'el     :' + this.$el); //undefined
    console.log('%c%s', 'color:red', 'data   :' + this.$data); //已被初始化
  }
  beforeMount() {
    console.group('------beforeMount挂载前状态------');
    console.log('%c%s', 'color:red', 'el     :' + this.$el); //已被初始化  虚拟dom
    console.log('%c%s', 'color:red', 'data   :' + this.$data); //已被初始化
  }
  mounted() {
    console.group('------mounted 挂载结束状态------');
    console.log('%c%s', 'color:red', 'el     :' + this.$el); //已被初始化
    console.log('%c%s', 'color:red', 'data   :' + this.$data); //已被初始化
  }

------beforeCreate创建前状态------
 el     :undefined
 data   :undefined
 ------created创建完毕状态------
 el     :undefined
 data   :[object Object]
 ------beforeMount挂载前状态------
 el     :undefined
 data   :[object Object]
------mounted 挂载结束状态------
 el     :[object HTMLElement]
 data   :[object Object]

参考：https://segmentfault.com/a/1190000011381906