vue3的生命周期-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3的生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.vue3生命周期官方流程图

vue3的生命周期,vue2.0&3.0,vue.js,前端,javascript

2.vue3中的选项式生命周期

vue3中的选项式生命周期钩子基本与vue2中的大体相同，它们都是定义在 vue实例的对象参数中的函数，它们在vue中实例的生命周期的不同阶段被调用。生命周期函数钩子会在我们的实例挂载，更新，卸载等过程中被调用的函数

以下是vue3中的主要选项式生命周期函数钩子：

beforeCreate：在实例初始化之后、数据观测(data observer)和event/watcher事件配置之前被调用。
created：在实例创建完成后被立即调用，此阶段完成了数据观测，但未挂载Dom，$el属性
beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。
mounted：实例被挂载后调用，此时el被新创建的vm.$el替换。
beforeUpdate：数据更新之前被调用，发生在虚拟DOM打重新渲染及打补丁之前。
updated:由于数据更改导致的虚拟Dom重新渲染及打补丁，在这之后会调用该钩子。
beforeUnmount：实例销毁之前调用。在这一步，实例仍然完全可用。
unmounted：Vue实例销毁后调用。

代码展示：

// 通过配置项的形式使用生命周期构子
  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('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  }

以上例子定义了一个Vue实例，每一个生命周期钩子函数都会在相应的阶段执行并打印对应的生命周期钩子名称。这提供了在不同阶段进行定制化操作的可能，例如，我们可以在mounted生命周期钩子中进行DOM操作，在created生命周期钩子中进行数据的初始化等

3.vue3中组件式生命周期

vue3的组合式API有一套新生命周期钩子，与vue3中选项式生命周期函数钩子有着对应的关系。

在Composition API中，组合式生命周期钩子有：

onBeforeMount：对应Vue2中的beforeMount钩子，Vue实例挂载之前调用。
onMounted：对应Vue2中的mounted钩子，Vue实例挂载完成后调用。
onBeforeUpdate：对应Vue2中的beforeUpdate钩子，数据更新时调用，但在DOM更新前。
onUpdated：对应Vue2中的updated钩子，数据更新后在DOM更新后调用。
onBeforeUnmount：对应Vue2中的beforeDestroy钩子，Vue实例销毁前调用。
onUnmounted：对应Vue2中的destroyed钩子，Vue实例销毁后调用。

代码展示：

 import {ref,onBeforeMount,onMounted,onBeforeMount,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

export default {
  setup() {
    const name = ref('Vue3');

    onBeforeMount(() => {
      console.log('onBeforeMount');
    });

    onMounted(() => {
      console.log('onMounted');
    });

    return {
      name
    };
  }
}

生命周期钩子的主要作用是在特定时点运行用户自定义的函数，这些函数可能包含数据获取、数据处理、状态修改等逻辑。利用这样的设计，开发者可以更好的控制代码执行的时机和逻辑。

在组合式API中，这些生命周期钩子不再像Vue2那样作为组件选项存在，而是独立的函数。这使得我们可以把相关逻辑组合在一起，理解和复用更方便。

4.vue3中选项式生命周期和组合式生命周期共存时的执行顺序

在Vue3中，组合式API和选项式API可以共存，对于生命周期钩子，在二者同时使用的情况下，其执行顺序为：首先执行组合式API的生命周期钩子，然后执行选项式API的生命周期钩子。

比如在一个实体中，同时使用了组合式API的onMounted和选项式API的mounted，则执行顺序为先执行onMounted，然后执行mounted。

以下是一个简单的例子：


import { onMounted } from 'vue'

export default {
  mounted() {
    console.log('选项式API的mounted生命周期钩子')
  },

  setup() {
    onMounted(() => {
      console.log('组合式API的onMounted生命周期钩子')
    });
  }
}

控制台输出的结果应该是：