vue3生命周期实列

在Vue3中，生命周期钩子函数被废弃，取而代之的是Composition API。Composition API是Vue3引入的一种新的组合式API，它允许开发者根据逻辑功能进行组织代码，而不是按照生命周期函数进行组织。

下面是一个使用Composition API实现的简单示例：

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

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    // 在组件挂载后调用
    onMounted(() => {
      console.log('Component mounted')
    })

    // 在组件更新后调用
    onUpdated(() => {
      console.log('Component updated')
    })

    // 在组件卸载前调用
    onUnmounted(() => {
      console.log('Component unmounted')
    })

    return {
      count,
      increment
    }
  }
}

在上面的示例中，我们使用了ref函数创建了一个响应式的变量count，并定义了一个increment方法来增加count的值。然后，我们使用onMounted、onUpdated和onUnmounted函数来分别处理组件的挂载、更新和卸载时的逻辑。

当组件被挂载后，onMounted函数会被调用，我们在这里输出了一条日志。当组件更新后，onUpdated函数会被调用，我们同样在这里输出了一条日志。当组件被卸载前，onUnmounted函数会被调用，我们同样在这里输出了一条日志。

需要注意的是，使用Composition API时，不再需要显式地在组件中定义生命周期函数。所有的逻辑都可以在setup函数中进行处理