vue3 setup基本使用

1. 基本概念

在 Vue 3 中，setup 函数是在组件创建之前调用的，用于初始化组件的响应式数据、计算属性、方法等。setup 函数返回的对象会作为组件的上下文提供给模板，模板中可以直接访问返回的属性和方法。

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

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

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

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

    // 返回的数据和方法将暴露给模板
    return {
      message,
      count,
      increment
    };
  }
}
</script>

二 特点

• setup函数返回的对象中的内容，可直接在模板中使用。
• setup中访问this是undefined。

函数作用域

在 setup 中，你不再使用 this 来访问组件实例的属性和方法。setup 函数的设计理念是使函数逻辑更加清晰和集中，而不依赖于 this。
组合式 API 的设计

组合式 API 强调通过显式传递参数和返回值来管理组件状态和行为，而不是通过 this 访问实例属性。这样可以提高逻辑的可读性和复用性。

• setup 函数在组件实例创建之前执行，最早在生命周期钩子之前被调用。这使得你可以在组件实例化之前进行初始化操作。

三 setup 与 Options API 的关系

setup 是 Vue 3 引入的组合式 API 的核心部分，而 Options API 是 Vue 2 中的传统方式。两者的关系如下：

• Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法。
• 但在setup中不能访问到Vue2的配置（data、methos…）。
• 如果与Vue2冲突，则setup优先。

四 setup 语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

<template>
  <button @click="handleClick">Click me</button>
  <p>Count: {{ count }}</p>
</template>

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

// 直接在这里定义响应式数据和方法
const count = ref(0);

const handleClick = () => {
  count.value++;
};
</script>

主要特点：

• 简化语法：不需要显式定义 setup 函数，直接在 <script setup> 中编写逻辑。
• 自动引入：常用的 Vue 功能（如 ref、computed）自动引入，无需手动导入。
• 更清晰的代码结构：让组件逻辑和模板结构更加直观和简洁。

五 注意点

1. 响应式数据

在 setup 中创建响应式数据时，需要使用 Vue 3 提供的 ref 和 reactive API。

ref：用于创建基本类型的响应式数据（如字符串、数字、布尔值等）。

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式的基本数据

reactive：用于创建对象和数组的响应式数据。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue!'
});

2. 返回值
   setup 函数必须返回一个对象，这个对象中的属性和方法会暴露给组件的模板部分。返回的对象中的数据和方法可以直接在模板中使用。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
模板部分：

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

3. 生命周期钩子

在 setup 中，可以使用 Vue 3 提供的生命周期钩子函数来替代 Vue 2 的生命周期选项。

onMounted：组件挂载完成后调用。

import { onMounted } from 'vue';

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

onUnmounted：组件卸载时调用。

import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component is unmounted.');
});

4. 上下文

setup 函数的第二个参数是 context 对象，它包含以下属性：

• attrs：包含组件的非 props 属性（如 v-bind 绑定的属性）。
• slots：包含插槽的内容。
• emit：用于触发事件。

export default {
  setup(props, context) {
    const { emit } = context;

    const handleClick = () => {
      emit('custom-event', 'payload');
    };

    return {
      handleClick
    };
  }
};

5. 函数和变量的作用域
   在 setup 中定义的函数和变量是局部的，只在 setup 内部可见。要让模板或其他函数访问这些定义，必须从 setup 中返回它们。

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

6. 异步操作
   在 setup 中处理异步操作时，确保正确管理其生命周期。通常需要结合生命周期钩子（如 onMounted）来处理异步数据请求，避免内存泄漏。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);

    onMounted(async () => {
      data.value = await fetchData();
    });

    return {
      data
    };
  }
};

7. this 的使用
   在 setup 中不使用 this，所有的数据和方法都是通过返回的对象或函数调用进行访问。this 仅在 Options API 中有效。

// Options API
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// Composition API
export default {
  setup() {
    const count = ref(0);
    
    const increment = () => {
      count.value++;
    };
    
    return {
      count,
      increment
    };
  }
};

8. TypeScript 支持
   setup 函数可以与 TypeScript 结合使用，提供类型检查和代码补全。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref<number>(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};