5. Vue.js 生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
生命周期钩子 = 生命周期函数 = 生命周期事件。
生命周期中里有一个很重要的概念： 钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法
5.1 创建期间生命周期函数
-
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性 ( 我感觉这个时候没什么可以去改变的了 ) -
created：实例已经在内存中创建OK，此时data和methods已经创建，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。 -
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 -
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示真实DOM渲染完了，可以操作DOM了）
5.2 运行期间生命周期函数
-
beforeUpdate：状态更新之前执行此函数， 此时data中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 -
updated：实例更新完毕之后调用此函数，此时data中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。
5.3 销毁期间生命周期函数
-
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 -
destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
PS：可以在beforeDestroy里清除定时器、或清除事件绑定。
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
DOM 渲染在 mounted 中就已经完成了。
生命周期钩子的一些使用方法：
-
beforecreate: 可以在此阶段加loading事件，在加载实例时触发； -
created: 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用； -
mounted: 挂载元素，获取到DOM节点； -
updated: 如果对数据统一处理，在这里写上相应函数； -
beforeDestroy: 可以做一个确认停止事件的确认框；
vue3 生命周期全都写在
setup中改变:
beforeDestroy 改名为 beforeUnmount
destroyed 改名为 unmounted
beforeCreate => setup
created => setup
beforeMount => onBeforeMount
mounted => onMounted
beforeUpdate => onBeforeUpdate
updated => onUpdated
beforeUnmount => onBeforeUnmount
unmounted => onUnmounted
setup() {
onMounted(() => {
console.log('mounted')
})
}