博客站

setup 函数是 Vue 3 中 Composition API 的核心部分，它用于替代 Vue 2 中的 data、methods、computed 等选项，提供了一种更灵活和强大的方式来组织组件的逻辑。

1. setup 函数的作用

setup 函数是组件的入口函数，它在组件实例创建之前执行。它的主要作用是：

• 初始化响应式数据：通过 ref、reactive 等 API 创建响应式数据。
• 定义方法：在 setup 中定义的方法可以直接在模板中使用。
• 返回模板使用的数据和方法：setup 函数返回一个对象，该对象的属性和方法可以在模板中直接使用。

2. setup 函数的基本用法

setup 函数接收两个参数：

1. props：组件的 props 对象，是响应式的。
2. context：包含 attrs、slots、emit 等属性的上下文对象。

setup 函数返回一个对象，该对象的属性和方法可以在模板中使用。

示例

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

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

export default {
  props: {
    initialMessage: String,
  },
  setup(props, context) {
    // 初始化响应式数据
    const message = ref(props.initialMessage || 'Hello, Vue 3!');

    // 定义方法
    function increment() {
      message.value  = '!';
    }

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

3. setup 函数的特性

响应式数据

• 使用 ref 或 reactive 创建响应式数据。
• ref 用于基本数据类型，reactive 用于对象和数组。

import { ref, reactive } from 'vue';

setup() {
  const count = ref(0);
  const state = reactive({ name: 'Vue 3' });

  return { count, state };
}

访问 Props

• props 是响应式的，可以直接在 setup 中使用。
• 如果需要解构 props，可以使用 toRefs 保持响应性。

import { toRefs } from 'vue';

setup(props) {
  const { initialMessage } = toRefs(props);
  return { initialMessage };
}

访问上下文 (context)

• context 包含 attrs、slots、emit 等属性。
• emit 用于触发自定义事件。

setup(props, { emit }) {
  function handleClick() {
    emit('custom-event', 'Hello from setup');
  }

  return { handleClick };
}

生命周期钩子

• 在 setup 中可以使用 Composition API 的生命周期钩子（如 onMounted、onUpdated 等）。

import { onMounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('Component is mounted!');
  });
}

返回渲染函数

• setup 可以直接返回一个渲染函数，用于完全控制组件的渲染逻辑。

import { h } from 'vue';

setup() {
  return () => h('div', 'Hello from render function');
}

4. setup 函数的优势

更好的逻辑复用

• 通过自定义 Hook 函数，可以将逻辑提取到外部，实现更好的复用。

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value  ;
  }
  return { count, increment };
}

// Component.vue
import { useCounter } from './useCounter';

setup() {
  const { count, increment } = useCounter();
  return { count, increment };
}

更好的 TypeScript 支持

• setup 函数对 TypeScript 的支持更好，类型推断更加准确。

import { ref } from 'vue';

setup() {
  const count = ref<number>(0);
  return { count };
}

更灵活的代码组织

• 可以将相关的逻辑组织在一起，而不是分散在 data、methods、computed 等选项中。

5. setup 函数的注意事项

• this 不可用：在 setup 函数中，this 是 undefined，不能访问组件实例。
• 响应式数据需要显式返回：只有在 setup 函数中返回的数据和方法才能在模板中使用。
• 生命周期钩子的使用：Composition API 的生命周期钩子需要在 setup 中显式调用。

6. 总结

setup 函数是 Vue 3 Composition API 的核心，它提供了一种更灵活和强大的方式来组织组件的逻辑。通过 setup 函数，开发者可以：

• 初始化响应式数据。
• 定义方法。
• 访问 props 和 context。
• 使用生命周期钩子。
• 实现更好的逻辑复用和代码组织。

setup 函数的设计使得 Vue 3 在开发大型应用时更加高效和可维护，特别是在需要复杂逻辑复用和 TypeScript 支持的情况下表现尤为突出。