vue3 生命周期，代码说明

vue3 生命周期，代码说明

Vue 3的生命周期函数与Vue 2有一些区别。下面是Vue 3中常用的生命周期函数及其详细基本语法示例：

1. beforeCreate：在实例被创建之前调用

import { createApp } from 'vue';

createApp({
  beforeCreate() {
    console.log('beforeCreate');
  }
}).mount('#app');

2. 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');

3. beforeMount：在实例挂载之前调用，此时尚未渲染虚拟DOM

import { createApp } from 'vue';

createApp({
  beforeMount() {
    console.log('beforeMount');
  }
}).mount('#app');

4. mounted：在实例挂载之后调用，此时已经渲染了虚拟DOM，并且可以访问到DOM元素

import { createApp } from 'vue';

createApp({
  mounted() {
    console.log('mounted');
    console.log(this.$el); // 访问DOM元素
  }
}).mount('#app');

5. beforeUpdate：在响应式数据更新之前调用，即在DOM更新之前调用

import { createApp } from 'vue';

createApp({
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}).mount('#app');

6. updated：在响应式数据更新之后调用，即在DOM更新之后调用

import { createApp } from 'vue';

createApp({
  updated() {
    console.log('updated');
  }
}).mount('#app');

7. beforeUnmount：在实例销毁之前调用

import { createApp } from 'vue';

createApp({
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}).mount('#app');

8. unmounted：在实例销毁之后调用

import { createApp } from 'vue';

createApp({
  unmounted() {
    console.log('unmounted');
  }
}).mount('#app');

注意：Vue 3中的beforeDestroy和destroyed生命周期函数已被替换为beforeUnmount和unmounted。