Vue 中 setup 如何声明函数

在 Vue 开发中，setup 函数是一个新的组件选项，它为在 Vue 组件中使用响应式数据和组合逻辑提供了一种更简洁的方式。而在 setup 中声明函数是构建交互性和功能性组件的关键部分。

在 setup 函数内声明一个普通函数非常简单直接。例如：

import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const greet = () => {
      console.log('Hello, Vue!');
    };
    return {
      greet
    };
  }
});

这里定义了一个名为 greet 的函数，它仅仅在控制台打印一条消息。通过在 return 对象中暴露这个函数，就可以在模板中使用它。在模板中，只需要使用 <button @click="greet">点击</button> 这样的代码，当按钮被点击时，greet 函数就会被触发。

如果函数需要访问响应式数据，那么就需要借助 ref 或 reactive 来创建响应式数据。比如：

import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment
    };
  }
});

在这个例子中，increment 函数用于增加 count 的值。由于 count 是通过 ref 创建的响应式数据，所以在函数中访问和修改它时，需要使用 .value。

当函数需要访问组件的属性或上下文时，可以使用 setup 函数的参数。setup 函数接收两个参数：props 和 context。props 是一个对象，包含了从父组件传递过来的所有属性；context 是一个上下文对象，包含了 attrs、slots、emit 等属性。例如：

import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    message: String
  },
  setup(props, context) {
    const logMessage = () => {
      console.log(props.message);
    };
    return {
      logMessage
    };
  }
});

这里的 logMessage 函数通过 props 参数访问了从父组件传递过来的 message 属性。

在 Vue 的 setup 函数中声明函数是一个灵活且强大的功能，它让开发者能够更高效地组织代码，实现组件的各种功能，无论是简单的交互还是复杂的业务逻辑。熟练掌握在 setup 中声明函数的技巧，对于提升 Vue 开发效率和代码质量有着重要意义。