Vue实例的生命周期：从创建时设置数据到编译模板，将实例装载到DOM，最后在数据更改期间更新 DOM。
Vue生命周期钩子：在默认情况下，Vue实例经历创建和更新 DOM 的过程中，会在其中运行一些函数，在这些函数内部创建并声明 Vue 组件。 这些函数被称为生命周期钩子。
以下八种函数循序渐进，共同构成生命周期。
1.Before create
在Vue实例初始化后立即被调用，第一个生命周期钩子
<script>
export default {
name: 'Test',
beforeCreate() {
alert('beforCreate hook has been called');
console.log('beforCreate hook has been called');
}
}
</script>
首先执行alert语句
2.Created
紧接beforeCreate函数，此时Vue实例已经激活了计算属性、事件等属性和随之而来的操作。
但是 Vue 实例在此阶段尚未安装，无法在此处操作 DOM，元素属性尚不可用。
可以用来在一个实例被创建之后执行代码
`new Vue({
data: { a: 1 },
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"`
生命周期钩子中的this指向上下文，因而不要在选项属性或回调上是用箭头函数。
因为箭头函数并没有this，
（3.Before mount）
DOM 上挂载实例之前，可以编译模板和作用域样式。但Vue实例仍然未安装，与其相关的操作和属性不可用
4.Mounted
vue实例安装完毕，可以使用元素属性及数据适合模板、DOM元素替换为数据填充元素等操作。
app 组件或项目中的其他组件都可以使用了
（5.Before update）
此阶段对需要更新 DOM 的数据进行更改。在进行删除事件侦听器之类的更改之前，适合任何逻辑。
6.Updated
承接Before update，对 DOM 更新之后立即调用此生命周期钩子。在此处执行与DOM相关的操作
（7.Before destroy）
Vue 实例被销毁之前，实例和所有函数仍然完好无损并在此处工作。在此阶段可执行资源管理、删除变量和清理组件
8.Destroyed
Vue 生命周期的最后阶段，其中所有的子 Vue 实例都已被销毁，事件监听器和所有指令之类的东西在此阶段已被解除绑定。
在对象上运行 destroy 之后调用
