前言
随着 Vue3 的发布，Composition API 作为其核心特性之一，为前端开发者带来了全新的组件编写方式。其中，setup 函数作为 Composition API 的入口，提供了一种更加灵活和模块化的方式来组织组件逻辑。本文将详细介绍 setup 函数的用法和特点，帮助开发者更好地理解和应用这一新特性。
setup 函数详解
setup 函数是 Vue3 中引入的一个新配置项，它的值是一个函数，用于配置组件的逻辑。在 setup 函数中，你可以声明组件所需的数据、方法、计算属性、监视等。setup 函数的返回值是一个对象，这个对象中的属性和方法可以直接在组件的模板中使用。
setup 函数的特点
setup函数返回的对象中的内容，可以直接在模板中使用。- 在
setup函数中访问this会得到undefined，因为它是针对函数式组件环境设计的。 setup函数会在beforeCreate钩子之前调用，它“领先”于所有的生命周期钩子执行。
setup实现代码如下：
代码语言：vue复制<template>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄 1</button>
<button @click="showTel">点我查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: 'Person',
setup() {
// 数据，原来写在 data 中
let name = '张三'
let age = 18
let tel = '13888888888'
// 方法，原来写在 methods 中
function changeName() {
name = 'zhang-san'
console.log(name)
}
function changeAge() {
age = 1
console.log(age)
}
function showTel() {
alert(tel)
}
// 返回一个对象，对象中的内容，模板中可以直接使用
return { name, age, tel, changeName, changeAge, showTel }
}
}
</script>setup 的返回值
- 若返回一个对象：则对象中的属性、方法等，在模板中均可以直接使用。
- 若返回一个函数：则可以自定义渲染内容。
setup 与 Options API 的关系
- Vue2 的配置（如
data、methods等）中可以访问到setup中的属性、方法。 - 但在
setup中不能访问到 Vue2 的配置（如data、methods等）。 - 如果存在冲突，
setup中的配置优先。
setup 语法糖
Vue3 提供了一个 setup 的语法糖，允许我们将 setup 配置独立到一个 <script> 标签中，而不需要在主 <script> 标签中声明 setup 函数。
扩展：简化 setup 的使用
使用 Vite 的插件 vite-plugin-vue-setup-extend 可以进一步简化 setup 的使用，使得组件结构更加简洁。
代码如下：
代码语言：txt复制npm i vite-plugin-vue-setup-extend -D
vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [ VueSetupExtend() ]
})
<script setup lang="ts" name="Person">总结
setup 函数作为 Vue3 中 Composition API 的核心，提供了一种全新的方式来编写和组织组件逻辑。它的灵活性和模块化特性使得开发者可以更加高效地构建和维护 Vue 应用。通过理解 setup 函数的用法和特点，开发者可以充分利用 Vue3 提供的强大功能，提升开发体验和应用质量。
