vue3hooks使用

Vue3 Hooks 是 Vue3 中提供的一种新的组件生命周期钩子函数，它们是基于函数的 API 设计，用于解决 Vue2 生命周期钩子函数的一些问题，如难以复用、难以组合、难以理解等。

下面是一些常用的 Vue3 Hooks：

1. `setup`：组件创建前调用的函数，用于设置组件状态和行为。
2. `onMounted`：组件挂载后调用的函数，用于执行一些需要 DOM 元素的操作。
3. `onUpdated`：组件更新后调用的函数，用于执行一些需要 DOM 元素的操作。
4. `onUnmounted`：组件卸载前调用的函数，用于执行一些清理工作。
5. `watch`：监听组件状态的变化，当变化时执行回调函数。
6. `computed`：计算属性，用于根据组件状态计算出一个新的值。

使用 Vue3 Hooks 的步骤如下：

1. 在组件中使用 `setup` 函数，返回一个对象。
2. 在对象中定义需要使用的 Vue3 Hooks。
3. 在组件中使用定义的状态和行为。

例如，下面是一个使用了 `onMounted` 和 `watch` 的组件：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'

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

    function increment() {
      count.value++
    }

    onMounted(() => {
      console.log('组件挂载成功')
    })

    watch(count, (newValue, oldValue) => {
      console.log(`count 从 ${oldValue} 变成了 ${newValue}`)
    })

    return {
      count,
      increment
    }
  }
}
</script>

该组件会在挂载后输出 `组件挂载成功`，并在 `count` 发生变化时输出变化前后的值。