选项式API中将 beforeDestroy 以及 destroyed 修改为 beforeUnmount 和 unmounted，其余一致
如果是vue2的生命周期钩子函数 errorCaptured
完整案例： 03_lifeCycle/01_lifeCycle_vue2.html 官方解释
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue2的生命周期钩子函数</title> </head> <body> <div id="app"> <button @click="add">加1</button> {{ count }} </div> </body> <script src="../lib/vue.js"></script> <script> /** * mounted ***** 数据请求，DOM操作，定时器，计时器等，实例化，订阅数据 * created *** 数据请求 * updated * * beforeDestroy **** 消除定时器 记时器 取消数据订阅等 * */ const app = new Vue({ data: { count: 0 }, methods: { add () { this.count++ if (this.count === 5) { this.$destroy() } } }, beforeCreate () { // 备孕 // 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用 console.log('beforeCreate') }, created () { // 怀上了 // 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。 console.log(this.$el) console.log('created') }, beforeMount () {// 生下来以前 // 在挂载开始之前被调用：相关的 render 函数首次被调用。 console.log('beforeMount') }, mounted () { // 生下了 // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。 // 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。 console.log(this.$el) console.log('mounted') }, beforeUpdate () { // 在数据发生改变后，DOM 被更新之前被调用。 // 这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。 console.log('beforeUpdate') }, updated () { // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。 console.log('updated') }, beforeDestroy () { // 实例销毁之前调用。在这一步，实例仍然完全可用。 console.log('beforeDestroy') }, destroyed () { // gg // 实例销毁后调用。该 console.log('destroyed') } }) app.$mount('#app') </script> </html>
03_lifeCycle/02_lifeCycle_vue3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue3的生命周期钩子函数</title> </head> <body> <div id="app"> <button @click="add">加1</button> {{ count }} </div> </body> <script src="../lib/vue.global.js"></script> <script> /** * mounted ***** 数据请求，DOM操作，定时器，计时器等，实例化，订阅数据 * created *** 数据请求 * updated * * beforeUnmount **** 消除定时器 记时器 取消数据订阅等 * */ const app = Vue.createApp({ data () { return { count: 0 } }, methods: { add () { this.count++ if (this.count === 5) { app.unmount() } } }, beforeCreate () { // 备孕 console.log('beforeCreate') }, created () { // 怀上了 console.log('created') }, beforeMount () {// 生下来以前 console.log('beforeMount') }, mounted () { // 生下了 console.log('mounted') }, beforeUpdate () { console.log('beforeUpdate') }, updated () { console.log('updated') }, beforeUnmount () { console.log('beforeDestroy') }, unmounted () { // gg console.log('destroyed') } }) app.mount('#app') </script> </html>
03_lifeCycle/03_lifeCycle_vue3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue3的生命周期钩子函数</title> </head> <body> <div id="app"> <button @click="add">加1</button> {{ count }} </div> </body> <script src="../lib/vue.global.js"></script> <script> /** * mounted ***** 数据请求，DOM操作，定时器，计时器等，实例化，订阅数据 * created *** 数据请求 * updated * * beforeUnmount **** 消除定时器 记时器 取消数据订阅等 * */ const { createApp, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } = Vue const app = createApp({ setup () { const count = ref(0) onBeforeMount(() => { console.log('onBeforeMount') }) onMounted(() => { console.log('onMounted') }) onBeforeUpdate(() => { console.log('onBeforeUpdate') }) onUpdated (() => { console.log('onUpdated') }) onBeforeUnmount(() => { console.log('onBeforeUnmount') }) onUnmounted(() => { console.log('onUnmounted') }) const add = () => { count.value += 1 if (count.value === 5) { app.unmount() } } return { count, add } } }) app.mount('#app') </script> </html>
