Vue | 一文详解Vue3中的Setup()函数

一、前言

[二、setup 函数详解](#二、setup 函数详解)

[▼ setup 函数的简介](#▼ setup 函数的简介)

[▼ setup 函数的特点](#▼ setup 函数的特点)

[▼ setup 函数的返回值](#▼ setup 函数的返回值)

[▼ setup 与 Options API 的关系](#▼ setup 与 Options API 的关系)

[三、setup 函数语法糖](#三、setup 函数语法糖)

[四、setup 函数的优势](#四、setup 函数的优势)

[☑ 扩展：简化 setup 函数的使用](#☑ 扩展：简化 setup 函数的使用)

[☑ 总结](#☑ 总结)

[☑ 参考资料](#☑ 参考资料)

一、前言

Composition API 作为 Vue3核心特性之一，为前端开发者带来了全新的组件编写方式。其中，setup 函数作为 Composition API 的入口，提供了一种更加灵活和模块化的方式来组织组件逻辑。本文将详细介绍 setup 函数的用法和特点，帮助开发者更好地理解和应用这一新特性。

二、setup 函数详解

setup 函数是 Vue3 中引入的一个新配置项，它的值是一个函数，用于配置组件的逻辑。在 setup 函数中，你可以声明组件所需的数据、方法、计算属性、监视等。setup 函数的返回值是一个对象，这个对象中的属性和方法可以直接在组件的模板中使用。

▼ setup 函数的简介

setup 函数是 Vue 3 引入的一个核心特性，它是组合式 API (Composition API) 的入口点。它主要用于替代 Vue 2 中的 data、methods、computed、watch 等选项，提供了一个更灵活的方式来组织和重用组件逻辑。

▼ setup 函数的特点

1. 执行时机 ：setup 函数在组件实例创建之前执行，此时组件的 props 已经解析完成，但组件的其他选项（如 data）尚未初始化。它发生在 beforeCreate 和 created 生命周期钩子之前。

setup 函数会在 beforeCreate 钩子之前调用，它"领先"于所有的生命周期钩子执行。

2. 参数：

❶ props：接收父组件传递过来的属性，是响应式的。

❷ context：一个对象，包含了一些在组件实例上下文中可用的属性（非响应式），主要有：

attrs：包含了所有非 props 的属性和事件监听器。
slots：包含了所有插槽内容。
emit：用于触发父组件监听的自定义事件。

3. 返回值：

setup 函数返回的对象中的内容，可以直接在模板中使用。

setup 函数必须返回一个对象，该对象中暴露的属性和方法可以在组件的模板中直接使用。
也可以返回一个渲染函数 (render function)。

this 的缺失 ：在 setup 函数内部，没有 this 的绑定 。这意味着你不能像在选项式 API 中那样使用 this 来访问 data、methods 或其他选项。所有需要暴露给模板的变量和函数都必须在 setup 内部声明并通过返回值暴露。

在 setup 函数中访问 this 会得到 undefined，因为它是针对函数式组件环境设计的。

响应式状态 ：在 setup 内部，需要使用 Vue 提供的函数（如 ref、reactive）来创建响应式数据。
生命周期钩子 ：可以在 setup 内部使用特定的函数（如 onMounted、onUpdated）来注册生命周期钩子的逻辑。

例子1：setup实现代码如下：

javascript 复制代码

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

例子2：基本用法示例

javascript 复制代码

import { ref } from 'vue';

export default {
  props: {
    initialCount: Number
  },
  setup(props, context) {
    // 声明响应式状态 (使用 ref 处理基本类型)
    const count = ref(props.initialCount || 0);

    // 声明函数
    function increment() {
      count.value++;
    }

    // 暴露给模板的内容
    return {
      count,
      increment
    };
  },
  // 模板中使用暴露的 count 和 increment
  template: `
    <button @click="increment">
      Count is: {{ count }}
    </button>
  `
};

▼ setup 函数的返回值

若返回一个对象：则对象中的属性、方法等，在模板中均可以直接使用。
若返回一个函数：则可以自定义渲染内容。

▼ setup 与 Options API 的关系

Vue2 的配置（如 data、methods 等）中可以访问到 setup 中的属性、方法。
但在 setup 中不能访问到 Vue2 的配置（如 data、methods 等）。
如果存在冲突，setup 中的配置优先。

三、setup 函数语法糖

使用了vue3后发现变量每次都必须return，不免很麻烦，所以，在vue3.2添加了script setup 语法糖。

Vue3 提供了一个 setup 的语法糖，允许我们将 setup 配置独立到一个 <script> 标签中，而不需要在主 <script> 标签中声明 setup 函数。

四、setup 函数的优势

更好的逻辑组织和复用：相关的代码可以组织在一起（例如，将与计数器相关的状态和函数放在一起），而不是分散在不同的选项块中。这使得逻辑更易于理解和维护，也更容易提取到可复用的函数（Composables）中。
类型推断更友好：对于 TypeScript 用户，组合式 API 提供了更好的类型支持。
更小的包体积：组合式 API 的代码通常可以被更高效地压缩。

☑ 扩展：简化 setup 函数的使用

使用 Vite 的插件 vite-plugin-vue-setup-extend 可以进一步简化 setup 的使用，使得组件结构更加简洁。

javascript 复制代码

// 使用npm安装命令安装vite-plugin-vue-setup-extend插件
// vite-plugin-vue-setup-extend插件作用：扩展Vue组件在<script setup>语法中的功能，特别是允许为 <script setup> 添加 name 属性（通常 <script setup> 语法中组件是没有 name 的）。
// -D 是 --save-dev 的简写，表示这个包是开发依赖，只在开发阶段使用，不会被打包到生产环境。
npm i vite-plugin-vue-setup-extend -D


// vite.config.ts文件  Vite 构建工具的配置文件，使用 TypeScript 编写。
// 从 vite 包中引入 defineConfig 方法，这是一个帮助定义 Vite 配置的辅助函数，提供类型提示和更好的开发体验。
import { defineConfig } from 'vite'
// 引入刚刚安装的插件 vite-plugin-vue-setup-extend。
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// 导出 Vite 的配置对象。
export default defineConfig({
  plugins: [ VueSetupExtend() ] // 在配置对象的 plugins 数组中，加入了 VueSetupExtend()，也就是启用了这个插件。
})

<script setup lang="ts" name="Person">

**注：vite-plugin-vue-setup-extend**插件作用总结

默认情况下，Vue 3 的 <script setup> 语法不支持直接设置组件的 name 选项（比如在 devtools 中显示的组件名，或者在递归组件、递归调用时需要的名字）。
通过使用 vite-plugin-vue-setup-extend 插件，可以在 <script setup> 中使用类似 <script setup name="MyComponent"> 的语法，为组件指定一个名称，从而增强开发体验和调试能力。

☑ 总结

setup 函数作为 Vue3 中 Composition API 的核心，提供了一种全新的方式来编写和组织组件逻辑。它的灵活性和模块化特性使得开发者可以更加高效地构建和维护 Vue 应用。通过理解 setup 函数的用法和特点，开发者可以充分利用 Vue3 提供的强大功能，提升开发体验和应用质量。

setup 函数是 Vue 3 组合式 API 的核心，它提供了一种在组件实例创建之前组织代码的方式。它接收 props 和 context 作为参数，通过返回值将状态和函数暴露给模板。它移除了 this 的绑定，要求开发者显式地使用响应式函数（如 ref, reactive）和生命周期钩子函数（如 onMounted）。这种模式大大提高了代码的组织性、可读性和可复用性。