Vue3学习（6）：Vue3生命周期速览

前端

2023-11-10 22:08:19

Vue3生命周期的变化

Vue3的生命周期与Vue2相比有了一些变化，主要体现在以下几个方面：

新的生命周期钩子 ：Vue3引入了两个新的生命周期钩子，分别是onBeforeMount和onBeforeUnmount。
钩子执行顺序的变化 ：Vue3中，created和mounted钩子的执行顺序进行了调整。在Vue2中，created钩子会在mounted钩子之前执行，而在Vue3中，mounted钩子会在created钩子之前执行。
钩子的参数变化 ：Vue3中，beforeCreate和beforeDestroy钩子不再接收参数。

Vue3生命周期钩子的使用场景

Vue3的生命周期钩子可以用于以下场景：

数据初始化 ：在created钩子中，可以对数据进行初始化。
DOM操作 ：在mounted钩子中，可以对DOM元素进行操作。
组件销毁 ：在beforeDestroy钩子中，可以对组件进行销毁。
其他场景 ：Vue3的生命周期钩子还可以用于其他场景，例如：
- 在beforeMount钩子中，可以对组件进行最后的准备工作，例如：加载数据。
- 在updated钩子中，可以对组件进行更新，例如：更新数据。
- 在activated钩子中，可以对组件进行激活，例如：显示组件。
- 在deactivated钩子中，可以对组件进行非激活，例如：隐藏组件。

实例演示

下面通过一个实例演示如何使用Vue3的生命周期钩子。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!'
    }
  },
  created() {
    console.log('created')
  },
  mounted() {
    console.log('mounted')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  }
}
</script>