Vue 2 的生命周期钩子
在 Vue 2 中，常用的生命周期钩子包括：
created：在实例创建完成后被调用。这时，实例已完成数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。但是，挂载阶段还没开始，$el 属性目前不可见。
mounted：在挂载完成后被调用。这时，组件已经插入到 DOM 中，可以访问到 $el 属性。
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
Vue 3 的生命周期钩子
Vue 3 引入了一些新的命名，并且在组合式 API (setup 函数) 中使用了不同的钩子函数：
onBeforeMount：在挂载开始之前被调用。
onMounted：在挂载完成后被调用。
onBeforeUnmount：在卸载组件实例之前调用。
onUnmounted：在卸载组件实例之后调用。
具体差异
created vs onMounted：
Vue 2：created 钩子在实例创建完成后被调用，但此时组件还没有被挂载到 DOM 上。
Vue 3：onMounted 钩子在组件挂载完成后被调用，此时组件已经被插入到 DOM 中。
beforeDestroy vs onBeforeUnmount：
Vue 2：beforeDestroy 在组件即将被销毁前调用。
Vue 3：onBeforeUnmount 在组件即将被卸载前调用。
destroyed vs onUnmounted：
Vue 2：destroyed 在组件被销毁后调用。
Vue 3：onUnmounted 在组件被卸载后调用。