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