深入了解vue2与vue3的生命周期对比

深入了解vue2与vue3的生命周期对比

Vue.js是一个流行的前端框架，它的生命周期是至关重要的概念。Vue2和Vue3的生命周期有一些区别。在本文中，我们将深入探讨这些区别。

Vue2的生命周期

Vue2的生命周期分为8个阶段，分别是：

1. beforeCreate - 在实例初始化之后、数据监测之前被调用。
2. created - 实例已经创建完成之后被调用。在这一步，实例已经完成了数据观测、属性和方法的运算、watch/event事件回调。然而，挂载阶段还没有开始。$el属性目前尚不可用。
3. beforeMount - 在挂载开始之前被调用：相关的render函数首次被调用。
4. mounted - 实例挂载完成后被调用，这时不保证子组件也都一起挂载完。
5. beforeUpdate - 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前，我们在这里可以进一步地更改状态，不会导致附加的重渲染过程。(在这个钩子中，不能执行同步或异步 DOM 更新。如果需要，请改用 updated 钩子。)
6. updated - 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后会调用该钩子。
7. beforeDestroy - 实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed - 实例销毁之后调用。这个时候，只剩下了它的DOM了。

Vue3的生命周期

Vue3的生命周期相比Vue2发生了很多变化，主要是为了优化性能。Vue3的生命周期分为10个阶段，分别是：

1. beforeCreate - 在实例初始化之后、数据监测之前被调用。
2. setup - 执行一次。该函数在实例创建之后才会被调用，并在Render之前挂钩CLI插件或者全局导入。要在setup中使用响应性，可以使用reactive、ref等方法。
3. onBeforeMount - 在挂载之前被调用，类似于beforeMount。
4. onMounted - 在实例挂载之后被调用，类似于mounted。
5. onBeforeUpdate - 在虚拟DOM更新之前被调用，类似于beforeUpdate。
6. onUpdated - 在虚拟DOM更新之后被调用，类似于updated。
7. onBeforeUnmount - 在实例销毁之前被调用，类似于beforeDestroy。
8. onUnmounted - 在实例销毁之后调用，类似于destroyed。
9. onActivated - 在组件被激活时被调用，Keep-Alive组件使用。类似于activated。
10. onDeactivated - 在组件被停用时调用，类似于deactivated。

示例

以下示例演示了Vue2和Vue3中生命周期的区别。

Vue2示例

我们创建一个简单的组件来演示生命周期：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world'
    }
  },
  beforeCreate() {
    console.log('Before create Vue2')
  },
  created() {
    console.log('Created Vue2')
  },
  beforeMount() {
    console.log('Before mount Vue2')
  },
  mounted() {
    console.log('Mounted Vue2')
  },
  beforeUpdate() {
    console.log('Before update Vue2')
  },
  updated() {
    console.log('Updated Vue2')
  },
  beforeDestroy() {
    console.log('Before destroy Vue2')
  },
  destroyed() {
    console.log('Destroyed Vue2')
  }
}
</script>

当我们在父组件中使用这个组件时，这里的生命周期将会打印到控制台上：

<template>
  <div>
    <hello-world />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
  components: {
    HelloWorld
  },
  beforeCreate() {
    console.log('Before create Vue2 parent')
  },
  created() {
    console.log('Created Vue2 parent')
  },
  beforeMount() {
    console.log('Before mount Vue2 parent')
  },
  mounted() {
    console.log('Mounted Vue2 parent')
  },
  beforeUpdate() {
    console.log('Before update Vue2 parent')
  },
  updated() {
    console.log('Updated Vue2 parent')
  },
  beforeDestroy() {
    console.log('Before destroy Vue2 parent')
  },
  destroyed() {
    console.log('Destroyed Vue2 parent')
  }
}
</script>

Vue3示例

现在我们用Vue3重写相同的组件，如下所示：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  setup() {
    const data = reactive({
      message: 'Hello world'
    })

    onBeforeMount(() => {
      console.log('Before mount Vue3')
    }),
    onMounted(() => {
      console.log('Mounted Vue3')
    }),
    onBeforeUpdate(() => {
      console.log('Before update Vue3')
    }),
    onUpdated(() => {
      console.log('Updated Vue3')
    }),
    onBeforeUnmount(() => {
      console.log('Before destroy Vue3')
    }),
    onUnmounted(() => {
      console.log('Destroyed Vue3')
    })

    return {
      ...data
    }
  }
}
</script>

现在，我们可以在父组件中使用此组件：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue'

export default {
  components: {
    HelloWorld
  },
  beforeCreate() {
    console.log('Before create Vue3 parent')
  },
  created() {
    console.log('Created Vue3 parent')
  },
  beforeMount() {
    console.log('Before mount Vue3 parent')
  },
  mounted() {
    console.log('Mounted Vue3 parent')
  },
  beforeUpdate() {
    console.log('Before update Vue3 parent')
  },
  updated() {
    console.log('Updated Vue3 parent')
  },
  beforeDestroy() {
    console.log('Before destroy Vue3 parent')
  },
  destroyed() {
    console.log('Destroyed Vue3 parent')
  }
}
</script>

以上示例说明了Vue2和Vue3的生命周期的区别。Vue3的生命周期优化到了异步执行，使得更高效，也更灵活。但是还需要充分理解，在项目中结合实践才能实现更好的开发效率和用户体验。