vue3 生命周期，代码说明
vue3 生命周期，代码说明
Vue 3的生命周期函数与Vue 2有一些区别。下面是Vue 3中常用的生命周期函数及其详细基本语法示例：
beforeCreate：在实例被创建之前调用
import { createApp } from 'vue';createApp({beforeCreate() {console.log('beforeCreate');}
}).mount('#app');
created：在实例创建完成后调用，可以访问到实例的属性和方法，但无法访问DOM元素
import { createApp } from 'vue';createApp({created() {console.log('created');console.log(this.$data); // 访问数据console.log(this.$props); // 访问属性console.log(this.$options); // 访问选项console.log(this.$refs); // 访问子组件引用console.log(this.$el); // 无法访问}
}).mount('#app');
beforeMount：在实例挂载之前调用，此时尚未渲染虚拟DOM
import { createApp } from 'vue';createApp({beforeMount() {console.log('beforeMount');}
}).mount('#app');
mounted：在实例挂载之后调用，此时已经渲染了虚拟DOM，并且可以访问到DOM元素
import { createApp } from 'vue';createApp({mounted() {console.log('mounted');console.log(this.$el); // 访问DOM元素}
}).mount('#app');
beforeUpdate：在响应式数据更新之前调用，即在DOM更新之前调用
import { createApp } from 'vue';createApp({beforeUpdate() {console.log('beforeUpdate');}
}).mount('#app');
updated：在响应式数据更新之后调用，即在DOM更新之后调用
import { createApp } from 'vue';createApp({updated() {console.log('updated');}
}).mount('#app');
beforeUnmount：在实例销毁之前调用
import { createApp } from 'vue';createApp({beforeUnmount() {console.log('beforeUnmount');}
}).mount('#app');
unmounted：在实例销毁之后调用
import { createApp } from 'vue';createApp({unmounted() {console.log('unmounted');}
}).mount('#app');
注意：Vue 3中的beforeDestroy和destroyed生命周期函数已被替换为beforeUnmount和unmounted。