vue3中生命周期示例代码

Vue 3的生命周期函数与Vue 2的生命周期函数相比有所不同，主要是将一些生命周期函数进行了重构和合并。以下是Vue 3中生命周期的示例代码：

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

<script>
import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  mounted() {
    console.log('mounted')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, Vue 3!'
    }
  },
  // Vue 3引入了新的生命周期函数
  setup() {
    onMounted(() => {
      console.log('onMounted')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })

    return {}
  }
}
</script>

上面的代码演示了Vue 3中生命周期函数的使用方式。其中，`mounted()`、`updated()`和`beforeUnmount()`函数与Vue 2中的生命周期函数相同，分别在组件挂载、更新和卸载时触发。而`setup()`函数是Vue 3新增的生命周期函数，用于组件的初始化工作，其中可以使用`onMounted()`、`onUpdated()`和`onUnmounted()`等函数来监听组件的挂载、更新和卸载等生命周期事件。需要注意的是，在Vue 3中，`setup()`函数必须返回一个对象或者`null`，而不能返回数据对象。