上图的理解：
- 初始化生命周期、事件
-
- beforeCreate（无法访问data和methods的东西）
- 初始化数据监听、数据代理
-
- created（可以访问data和methods的东西）
- 判断Vue({ })里面有没有写el:'xxx'
- 如果没有，执行了Vue（{}） 外面的 vm.$mount(el) 【里面没有el，就在外面找】
- 判断Vue（{}）里面是否有模板template:'xxx'
- 如果没有：编译el的外部html作为模板template，也就是一整个
<div id="root"> ...</div>；如果有： 编译模板template 到render函数（负责渲染的函数） - 【此时Vue开始解析模板，在内存中生成虚拟DOM，页面还不能显示解析好的内容，还是{{xxx}}】
-
- beforeMount（页面呈现的是还未经Vue编译的DOM结构，所有对DOM的操作都无效）
- 创建vm.$el 替代el（存一下真实DOM（方便以后复用），然后将内存中的虚拟DOM 转为真实DOM插入页面中）
-
- mounted（页面呈现经Vue编译的DOM，对DOM操作均有效（尽可能避免在此时操作DOM），一般在这里进行初始化操作，如开启定时器、订阅消息、网络请求、绑定自定义事件等）
- 当data数据发生变化
-
- beforeUpdate（此时，数据是新的但页面是旧的，即页面和数据尚未保持同步）
- 根据新数据生成虚拟DOM，和旧的虚拟DOM比较，重新渲染，完成页面更新，即完成model到view的更新
-
- updated（此时数据是新的，页面也是新的，即页面和数据保持同步）
- 当vm.$destroy() 调用时
-
- beforeDestroy（此时，vm中所有data、methods、指令等都处于可用状态，但马上要执行销毁过程，一般此阶段进行关闭定时器、取消订阅消息、解绑自定义事件等）
- 关闭子监视属性、组件、事件监听器
-
- destroyed（销毁完成（用的少））
其中常用的两个生命周期钩子函数是mounted和beforeDestroy，在mounted中可以发送Ajax请求/启动定时器/绑定自定义事件/订阅消息等(初始化操作)；beforeDestroy中可以清除定时器/解绑自定义事件/取消消息订阅等(收尾工作)。
这些就是对生命周期的概况，总结如有不足请在评论区补充
