Vue 生命周期

1.单个组件的生命周期

• beforeCreat：在实例初始化之前，数据观测（data observer）和 event 等配置之前被调用。这时候 initState 还没有执行，所以不能访问到props、data、methods 等属性。
• created：在实例创建之后立即被调用，这时候 initState 方法已经被调用，可以访问到相关属性，但是 DOM 还没有被渲染，所以不能访问到 $el 属性。编译模板，把数据和模板生成为 html ；
• beforeMount：在挂载之前被调用，render 方法执行之前。
• mounted：在 render 方法执行之后，用上面编译好的 html 内容替换 el 属性指向的 DOM 或者选择器对应的 html 标签里面的内容（创建 vm.$el, 并且用前面编译好的 html 内容替换它）。
• beforeUpdate：数据更新时调用，发生在虚拟 dom 重新渲染之前，你可以在这个钩子中进一步的改变状态，这不会触发附加的重渲染过程。
• updated：由于数据更新导致的虚拟 dom 重新渲染之后，会调用该钩子。这时候虚拟 DOM 已经重新渲染，应该避免在这个钩子里面更改状态，因为这可能会导致更新无限循环。
• beforeDestroy：实例销毁之前调用。
• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 

2.父子组件的生命周期

1. 挂载阶段
   1. 父组件先创建实例，然后是子组件。只有先创建父组件之后才能找得到子组件；created：父 => 子；
   2. 子组件先挂载完成，父组件才能挂载结束。mounted：子 => 父；
2. 更新阶段
   1. 子组件依赖父组件的props，那么是父组件先触发beforeUpdate；beforeUpdate：父 => 子；
   2. 更新完成还是子组件先完成，原理和挂载一样；updated：子 => 父；
3. 卸载阶段
   1. 父组件先开始卸载；beforeDestroy：父 => 子；
   2. 子组件先卸载完后；destroyed：子 => 父；

综上可以得出一个结论，在同一个阶段，都是父组件先开始，才能触发子组件；但是肯定是子组件先完成，因为只有子组件完成这个阶段，父组件才算是真正完成。