setup 概述

setup 是 Vue3 中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视、生命周期钩子。。。等等，都可以配置在 setup 中。

特点如下：

• setup 函数返回的对象中的内容，可直接在模板中使用。
• setup 中访问 this 是 undefined。
• setup 函数会在 beforeCreate 之前调用，它是“领先”所有钩子执行的。

<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中（注意：此时的name、age、tel数据都不是响应式数据）
    let name = "张三";
    let age = 18;
    let tel = "13888888888";

    // 方法，原来写在methods中
    function changeName() {
      name = "zhang-san"; //注意：此时这么修改name页面是不变化的
      console.log(name);
    }
    function changeAge() {
      age += 1; //注意：此时这么修改age页面是不变化的
      console.log(age);
    }
    function showTel() {
      alert(tel);
    }

    // 返回一个对象，对象中的内容，模板中可以直接使用
    return { name, age, tel, changeName, changeAge, showTel };
  },
};
</script>

setup 的返回值

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

setup(){
  return ()=> '你好啊！'
}

setup 与 Options API 的关系

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

setup 语法糖

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

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
};
</script>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
console.log(this); //undefined

// 数据（注意：此时的name、age、tel都不是响应式数据）
let name = "张三";
let age = 18;
let tel = "13888888888";

// 方法
function changName() {
  name = "李四"; //注意：此时这么修改name页面是不变化的
}
function changAge() {
  console.log(age);
  age += 1; //注意：此时这么修改age页面是不变化的
}
function showTel() {
  alert(tel);
}
</script>

组件 name

写法一、普通标签

搞一个普通的 <script> 标签 export 出 name 选项

<script lang="ts">
export default {
  name: "Person",
};
</script>

写法二、defineOptions()

使用 defineOptions()

<script setup lang="ts">
import { defineOptions } from "vue";
defineOptions({
  name: "Person123",
});
</script>

写法三、插件

借助 vite 中的插件简化

1. 第一步：npm i vite-plugin-vue-setup-extend -D
2. 第二步：vite.config.ts

import { defineConfig } from "vite";
import VueSetupExtend from "vite-plugin-vue-setup-extend";

export default defineConfig({
  plugins: [VueSetupExtend()],
});

3. 第三步：<script setup lang="ts" name="Person">

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24