Vue中有哪些生命周期及使用场景
生命周期
在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
1、beforeCreate(创建前)
在数据观测和初始化事件还未开始。
2、created(创建后)
此时状态：Vue里的数据在内存中已经创建完毕，但是还没有渲染到页面上。 可做操作：从服务器获取一些初始化的数据，或者通过ajax向服务器发送一些数据。
3、beforeMount(载入前)
在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
4、mounted（载入后）
此时状态： 数据已经渲染在了浏览器的页面上。 可做操作：操作DOM节点
5、beforeUpdate（更新前）
在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
6、updated（更新后）
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7、beforeDestroy（销毁前）
此时状态：奄奄一息。 可做操作：移除定时器或者事件绑定。 但是销毁的时候需要手动销毁：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="root">
{
{a}}
<div @click="destroyBtn">销毁</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: #root,
data: {
a: 1,
b: 2
},
beforeDestroy() {
alert("gameover")
},
methods: {
destroyBtn: function() {
this.$destroy();
}
}
})
// vm.$destroy()
</script>
</body>
</html>
8、destroyed（销毁后）
在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
使用场景
created: 进行ajax请求异步数据的获取、初始化数据
mounted: 挂载元素dom节点的获取
nextTick: 针对单一事件更新数据后立即操作dom
updated: 任何数据的更新，如果要做统一的业务逻辑处理
watch: 监听数据变化，并做相应的处理
