Vue生命周期的生动描述

1. new Vue()，new命令底层机制的第一步就是创造一个空对象，let obj={}，这个空对象就是我们常说的vm实例，只是现在这个实例上啥也没有。后面的所有流程可以简单概括为：往这个空对象上添加一些属性和方法，最后返回出去。接下来这个空对象就要开始生命周期之旅了。
2. 进行第一次初始化，具体初始化什么那就得看源码了，初学者也无需知道，不过可以了解一下，官方的说法是：init Events & LifeCycle，翻译成中文就是：初始化事件和生命周期；
3. 第一次初始化完成之后，就会触发beforeCreate钩子，你在这个钩子中写的代码都会在这个时候执行；
4. 然后进行第二次初始化，第二次初始化的内容官方说法是：init injection & reactivity（初始化注入和响应式），简单说来就是：往实例上添加一些属性和方法（注入），比如data、computed、methods，并且在这个过程中实现了数据的响应式。
5. 整个初始化过程至此就结束了，这时会触发created钩子；

6. 下面开始模板编译阶段（这个阶段主要有两次判断）：

   6.1 首先进行第一个判断，有没有el选项？如果有就进入6.2；如果没有，就停在这里，直到vm.$mount(el)调用了再进入6.2。大白话理解：没有东西给我挂载，我还费这么大劲编译干啥？等你确定目标给我挂载了，我再开始工作。

   6.2 要开始编译了，但是编译啥呢？这里会进行第二次次判断，如果有template选项，就编译template，如果没有，就编译外部的HTML。

7. 编译完成，这时要触发beforeMount钩子；
8. 把el元素赋值给vm.$el，之后我们就可以用vm.$el访问这个元素了；
9. 挂载完毕，触发mounted钩子。

至此，页面完成渲染，等待与用户发生交互，一般会发生两种情况：

1. 遇到了某些响应式数据发生了变化，Vue得通知DOM重新渲染，但是别急，在DOM重新渲染之前，“我”得先触发一下beforeUpdate钩子，然后再开始渲染，渲染结束后，记得触发一下updated钩子哦。
2. 用户某个操作想销毁“我”，那就执行 vm.$destroy()，这个函数执行的第一步是触发beforeDestroy钩子，第二步是开始销毁，销毁什么内容？官方说法是 teardown wathcers, child components and event listeners（拆除观察者、子组件和事件监听者），第三步是触发destroyed钩子。

最后通过官方的生命周期流程图对上面整个流程做个总结：