生命周期介绍
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。
简单说就是一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期
大体分为四个阶段（过程）
创建-挂载-更新-销毁。beforeCreate、create、beforeMount、mounted、beforeUpdate、update、beforeDestroy、destroyed、activated、deactivated，
其中前八个较为常用，最后两个一般应用于<keep-alive>。
beforeCreate（创建前/ 初始化页面前 ）
详情：此阶段为实例化初始之后，this指向创建的实例，此时数据观察的机制都未形成，不能获得DOM节点，data，computed，watch、methods上的方法和数据均都不能访问。
场景：可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些
created（创建后/ 初始化界面后 ）
详情：此阶段实例已经创建，完成数据（data、props、computed）的初始化导入依赖项，可以访问data、computed。watch、methods上的方法和数据。
场景：结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时
beforeMount（挂载前/渲染dom前）
详情：虽然得不到具体的DOM元素，但vue的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
场景：可以发送数据请求
注意：在服务器端渲染期间不会被调用
mounted（挂载后渲染dom后）
详情：完成创建vm.$el和双向数据绑定，完成DOM挂载和渲染，可以在此函数过程对挂载的DOM进行操作，例如请求后端拿回数据，配合路由钩子处理一些事情。
场景：获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求
注意：在服务器端渲染期间不会被调用
beforeUpdate（更新数据前）
详情：可以在更新前访问现有的DOM，例如手动移除添加的事件监听器。
场景：挂载完成之前访问现有DOM，比如手动移除已添加的事件监听器；也可以进一步修改数据
注意：在服务器渲染期间不会被调用，只有初次渲染会在服务端调用
updated（更新数据后）
详情：数据更新，完成虚拟DOM的重新渲染。
场景：可执行依赖与DOM的操作
注意：服务器端渲染期间不会被调用
beforeDestory（销毁前/卸载组件前）
详情：可以做一些删除提示，例如，您确定要删除xx吗？
场景：实例销毁之前，执行清理任务，比如：清除定时器等
注意：服务器端渲染期间不会被调用
destoryed（销毁后/卸载组件后）
详情：当前组件已经删除，销毁监听事件、组件、子实例也被销毁，此时无法操作里面的任何东西。
场景：提示已删除
注意：服务器端渲染期间不会被调用
activated
详情：在使用vue-router时有时需要使用<keep-alive>来缓存组件状态，此时created钩子不会被重复触发，如果子组件需要在每次加载的时候进行操作，可以使用activated钩子触发。
注意：服务器端渲染期间不会被调用
deactiated
详情：<keep-alive>被移除时使用。
注意：服务器端渲染期间不会被调用
扩展阅读：vue.js服务器端渲染指南
执行顺序：
父组件开始执行到beforeMount 然后开始子组件执行，最后是父组件mounted。
如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。
当子组件挂载完成后，父组件才会挂载。
当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。
销毁父组件时，会先销毁子组件。
兄弟组件的初始化（mounted之前）是分开进行的，挂在是从上到下依次进行。当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的。
