Vue.js的生命周期主要分为四个阶段：创建阶段、编译阶段、挂载阶段、更新与销毁阶段。每个阶段都有对应的生命周期钩子函数。
创建阶段：包含生命周期钩子：
beforeCreate和created
beforeCreate: 在实例初始化之后，数据观测（data observer） 和 event/watcher 事件配置之前被调用。
created: 实例已经创建完成之后调用，但是挂载阶段还没开始，$el属性目前不可见。编译阶段：这个阶段实际上在
beforeCreate和created钩子之间进行，这个阶段负责把模板编译成虚拟DOM。挂载阶段：包含生命周期钩子：
beforeMount,mounted
beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。
mounted: 实例挂载完成后调用，但需要注意mounted并不保证所有的子组件也都一起挂载完成，如果需要等到整个视图都渲染完毕，可以使用vm.$nextTick。更新与销毁阶段：包含生命周期钩子：
beforeUpdate,updated，beforeDestroy，destroyed
beforeUpdate: 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
updated: 实例更新完毕后调用，这个钩子在数据更改导致的虚拟DOM重新渲染和打补丁之后会被调用。
beforeDestroy: 实例销毁之前调用，主要用于解绑自定义的事件等。
destroyed: Vue实例销毁后调用，调用后，Vue实例的所有指令也将解绑，所有的事件监听器都被移除，所有的子实例也都被销毁。
理解Vue生命周期钩子函数的应用场景可以更好地运用到实际开发中，以下为钩子函数的一些常见应用举例：
1、beforeCreate&created：可以在这两个钩子函数中进行初始化的操作。例如，在created钩子函数中进行http请求获取数据，因为在这一步，Vue实例已经完成了数据的观测，所以数据变更会触发视图的更新。new Vue({ data: { msg: "" }, created() { axios.get("api/msg").then(response => { this.msg = response.data; }); } });
2、beforeMount&mounted：挂载阶段，当需要操作DOM元素时，如使用第三方库（echarts等）生成图表，应该在mounted中进行，因为在这个阶段，模板已经在内存中编译完成，并挂载到了页面上。
new Vue({ mounted() { const chart = echarts.init(document.getElementById('myChart')) // ...设置图表option chart.setOption(option) } });
3、beforeUpdate&updated：当需要在数据变化后执行一些特定的业务逻辑时，可以在这两个钩子中进行。例如，在更新前保存一份旧数据，在更新后和旧数据进行对比，如果变化较大，则提示用户。
new Vue({ data: { msg: '' }, beforeUpdate() { this.oldMsg = this.msg; }, updated() { if (this.msg !== this.oldMsg) { alert('数据有大变动'); } } });
4、beforeDestroy&destroyed：在实例销毁前清理那些不会被自动清理的事件监听等，可以在beforeDestroy钩子函数中进行。多用于组件销毁前的善后工作，，比如清除定时器。
new Vue({ data: { intervalId: null }, created() { this.intervalId = setInterval(() => { console.log('do something'); }, 1000); }, beforeDestroy() { clearInterval(this.intervalId); } });
