vue3 setup基本使用

本文主要是介绍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）自动引入，无需手动导入。
更清晰的代码结构：让组件逻辑和模板结构更加直观和简洁。

五注意点

响应式数据

在 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!'
});

返回值
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>

生命周期钩子

在 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.');
});

上下文

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

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

export default {setup(props, context) {const { emit } = context;const handleClick = () => {emit('custom-event', 'payload');};return {handleClick};}
};

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

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

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

import { ref, onMounted } from 'vue';export default {setup() {const data = ref(null);onMounted(async () => {data.value = await fetchData();});return {data};}
};

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};}
};

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

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