【前端框架】Vue3 中 `setup` 函数的作用和使用方式

在 Vue 3 里，setup 函数是组合式 API 的核心入口，为开发者提供了更灵活、高效的组件逻辑组织方式。以下为你详细介绍其作用和使用方式：

作用

1. 初始化响应式数据

在 setup 函数中，我们能够使用 ref 和 reactive 等函数来创建响应式数据。ref 常用于创建单个响应式值，而 reactive 则更适合创建响应式对象或数组。这些响应式数据会在组件状态发生变化时自动更新与之绑定的 DOM。

2. 组织和复用逻辑

通过 setup 函数，可以将相关的逻辑封装成独立的函数，然后在 setup 中调用这些函数，实现逻辑的复用。这种方式使得代码结构更加清晰，易于维护和扩展。

3. 注册生命周期钩子和监听事件

在 setup 函数内部，可以使用 onMounted、onUpdated、onUnmounted 等函数来注册生命周期钩子，还能使用 watch 函数监听数据的变化。这样可以在组件的不同生命周期阶段执行特定的操作。

4. 提供数据和方法给模板使用

setup 函数返回的数据和方法可以在模板中直接使用，实现了数据和视图的绑定。

使用方式

1. 基本结构

setup 函数在组件中使用时，它接收两个参数：props 和 context。props 是父组件传递给子组件的属性，context 是一个包含 attrs、slots 和 emit 的对象。

<template>
  <div>
    <!-- 使用 setup 函数返回的数据 -->
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup(props, context) {
    // 创建响应式数据
    const message = ref('Hello, Vue 3!');
    const count = ref(0);

    // 定义方法
    const increment = () => {
      count.value++;
    };

    // 返回数据和方法供模板使用
    return {
      message,
      count,
      increment
    };
  }
};
</script>

2. 使用 script setup 语法糖

Vue 3 提供了 script setup 语法糖，它简化了 setup 函数的使用，无需显式地返回数据和方法，在模板中可以直接使用在 script setup 中定义的变量和函数。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建响应式数据
const message = ref('Hello, Vue 3!');
const count = ref(0);

// 定义方法
const increment = () => {
  count.value++;
};
</script>

3. 访问 props 和 context

在 setup 函数中，可以通过参数访问 props 和 context。

<template>
  <div>
    <p>{{ props.title }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  setup(props, context) {
    // 访问 props
    console.log(props.title);

    // 访问 context
    console.log(context.attrs);
    console.log(context.slots);
    console.log(context.emit);

    return {};
  }
};
</script>

4. 注册生命周期钩子和监听事件

在 setup 函数中，可以使用 onMounted、watch 等函数来注册生命周期钩子和监听事件。

<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

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

const count = ref(0);

// 注册生命周期钩子
onMounted(() => {
  console.log('Component mounted');
});

// 监听数据变化
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>

通过上述的作用和使用方式，setup 函数为 Vue 3 组件开发带来了更强大的功能和更灵活的代码组织能力。