vue3 stup 语法糖 钩子函数示例

Vue 3 中的`setup`函数还支持语法糖形式，即将组件状态和方法作为变量返回。这种语法糖形式更加简洁和直观，非常适合创建小型组件。下面是一个简单的示例：

import { ref } from 'vue';

export default {
  props: {
    message: {
      type: String,
      default: 'Hello, World!'
    }
  },
  setup(props) {
    // 创建响应式状态
    const count = ref(0);

    // 定义组件方法
    function increment() {
      count.value++;
    }

    // 返回状态和方法
    return {
      count,
      increment
    };
  }
}

在这个示例中，我们省略了`context`参数，并将组件状态和方法作为变量直接返回。这样做可以使代码更加简洁，但在某些情况下可能也会使代码更加难以阅读。因此，建议根据实际情况选择使用语法糖形式还是普通形式。