Vue2与Vue3中生命周期执行顺序的区别说明

Vue2和Vue3是两个较为流行的版本的Vue框架。两个版本的组件生命周期函数执行顺序有一些区别。本文将分析并比较Vue2和Vue3中组件生命周期函数的执行顺序，同时给出两个示例以便更好地理解。

Vue2生命周期执行顺序

beforeCreate

在Vue2中，组件实例被创建后，会立即执行beforeCreate函数。在此函数中，组件实例及其数据对象并未完全被初始化。因此，在该函数执行期间，开发者将无法对组件实例访问、修改其内部数据和DOM元素结构。

created

在Vue2中，created函数会在组件实例及其关联的数据对象创建完成后立即执行。在该函数中，组件实例及其数据对象已基本创建完毕可访问并修改。但此时，组件的DOM元素结构尚未生成。

beforeMount

在Vue2中，beforeMount函数将在DOM元素结构建立前执行。在该函数内，开发人员可以访问组件的DOM元素结构及其内部数据，但此时的DOM元素尚未渲染出来。

mounted

在Vue2中，mounted函数将在组件DOM元素结构建立后立即执行。在该函数中，组件的DOM元素已经渲染出来，并可以进行一些DOM操作了。

beforeUpdate

在Vue2中，当组件状态发生变化时，会触发beforeUpdate函数。在该函数中，组件的变量、props、state等数据均已经改变，开发人员可以在该函数中执行数据处理操作，但此时组件的DOM元素尚未更新。

updated

在Vue2中，当组件状态发生变化后，会执行该组件的updated函数。在该函数内，组件实例的DOM元素已经更新，该函数执行期间可以访问更新后的DOM元素以及数据对象。

beforeDestroy

在Vue2中，当调用组件的destroy函数来销毁组件实例前，会触发beforeDestroy函数。在该函数中，组件实例及其关联的数据对象及DOM元素结构均得到完整的初始化。

destroyed

在Vue2中，当组件销毁后，会触发destroyed函数。在该函数中，组件的数据对象及DOM元素结构均已经被销毁，此时开发人员将无法再访问组件的实例对象及其内部数据。

Vue3生命周期执行顺序

setup

在Vue3中，setup函数会被优先执行。该函数中将进行一些声明和初始化操作。此外，由于Vue3中使用了Composition API，所以该函数也具有了更多的功能。

beforeCreate

在Vue3中，beforeCreate函数的作用与Vue2中的相同。组件实例及其数据对象均未被完全初始化，因此不可进行数据访问及修改操作。

created

在Vue3中，created函数的作用同Vue2中。此时组件实例及其数据对象均已经初始化完成，数据访问及修改操作均可进行。

beforeMount

在Vue3中，beforeMount函数同Vue2中有所不同。Vue3中，beforeMount函数会在DOM元素结构及组件内部数据均已准备就绪后执行。

mounted

在Vue3中，mounted函数与Vue2中的功能相同。在mounted函数中，组件的DOM元素已经生成，开发人员可进行DOM操作。

beforeUpdate

在Vue3中，beforeUpdate函数与Vue2中的功能相同，组件状态发生改变时会被触发。这些状态变化包括组件属性值的改变以及使用setState更新组件状态的操作。

updated

在Vue3中，更新操作完成后会触发updated函数，该函数与Vue2版本的功能相同。

unmounted

在Vue3中，unmounted函数，用于在组件被卸载之前进行清理操作。

示例解释

示例一

在下面的示例中，Vue2版本的组件通过props属性实现父子组件之间的交互。组件在组件被销毁之前将数据传递回父组件：

<!-- 父组件 -->
<template>
  <div>
    <child-component :count="count" @update-count="updateCount"></child-component>
    <button @click="resetCount">Reset Count</button>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    updateCount(count) {
      this.count += count
    },
    resetCount() {
      this.count = 0
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>The current count is: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  props: ['count'],
  methods: {
    increment() {
      this.$emit('update-count', 1)
    }
  },
  beforeDestroy() {
    this.$emit('update-count', -this.count)
  }
}
</script>

在 Vue2 中，在组件销毁之前，将触发 beforeDestroy 函数。在该函数中，我们可以在子组件中使用$emit方法将该组件的计数值传递回父组件，从而在父组件中更新其计数值。

示例二

在 Vue3 中，需要使用 Setup 函数初始化组件：

<template>
  <div>
    {{ count }}
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    function incrementCount() {
      state.count++
    }

    return { state, incrementCount }
  },
  unmounted() {
    console.log('Component has been unmounted.')
  }
}
</script>

在 Vue3 中，需要使用 Setup 函数来声明组件的状态。Setup 函数可以返回一个对象，该对象可以向模板中传递数据和方法。在本示例中，我们使用reactive函数在setup函数中声明了组件状态，然后在返回对象中包含这种状态和一个用于增加计数器的函数。当组件被卸载时，Vue3会自动触发unmounted函数，在本例中，我们使用此函数输出一个简单的日志消息。

总结：

Vue2和Vue3中生命周期的执行顺序区别主要在beforeMount函数和mounted函数之间的执行顺序不一样。在Vue2中beforeMount函数会在data和DOM准备完毕后执行,Vue3中beforeMount函数只有在DOM和组件内部数据均已准备就绪后执行。

希望这篇文章让读者对比较Vue2和Vue3中的生命周期有更好的理解。