vue3中setup语法糖怎么使用钩子

setup()是Vue 3中新引入的语法糖，用于在组件实例化之前执行一些逻辑。它可以返回一个对象，这个对象是组件实例中的公共属性和方法。

在setup()函数中，可以使用所有Vue 3中可用的钩子，例如created()、mounted()、updated()、destroyed()。只需要将它们的名称改为前缀为“on”的形式即可。例如，created()变为onCreated()。

例如，以下是一个简单的Vue 3组件，其中使用了setup()语法糖：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="incrementCounter">Click me</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello world',
      counter: 0,
    });

    const incrementCounter = () => {
      state.counter++;
    };

    return {
      ...state,
      incrementCounter,
    };
  },
};
</script>

在这个示例中，setup()函数返回了一个拥有message、counter和incrementCounter属性的对象。这些属性可以在模板中使用。