vue3 setup语法糖详解与使用

Vue3+TypeScript系列笔记

6.setup语法糖详解与使用

语法糖（Syntactic Sugar），是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语。它指的是在计算机语言中添加的某种语法，这种语法对语言的编译结果和功能并没有实际影响，但却能更方便程序员使用该语言。

简单来说，语法糖就是编程语言中用来使表达更加清晰、方便或者更符合程序员编程习惯的语法，其本质上是一种便捷写法。

Vue 也提供了许多语法糖，这些是为了让开发者编写代码时更加简洁、易读和高效。这些语法糖在 Vue 的模板语法、计算属性、侦听器、指令等方面都有体现。

在上一篇笔记中，我们使用setup函数编写了第一个Vue3组合式组件，在这里我们将使用setup语法糖<script setup>简化代码、提高开发效率。

6.1 常规写法

<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>年龄：{{ age }}</h3>
        <h3>电话：{{ tel }}</h3>
        <h3>简介：{{ introduction }}</h3>
        <button @click="changeAge">修改年龄</button>
        <button @click="showIntroduction">修改简介</button>
    </div>
</template>

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

<!-- 在这里相当于编写了setup函数并且进行了return -->
<script lang="ts" setup>
   
    let name = "nomi糯米";
    let age = 20;
    let tel = "18888888888";
    let introduction = "大声喊出超喜欢！";

function changeAge() {
    age += 1;
    console.log(age);
}

function showIntroduction() {
    introduction = "大声喊出超喜欢！(^ ~ ^)";
    console.log(introduction);
}
</script>

<style scoped>
.person {
    width: 500px;
    margin: 0 auto;
    border: solid #006effc1 2px;
    box-shadow: #006effc1 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    width: 80px;
    border: none;
    color: #fff;
    background-color: #006effc1;
    border-radius: 40px;
    padding: 5px;
    margin: 0 5px;
}
</style>

在此写法中我们会发现定义了两个script标签，不要感觉奇怪鸭~

第一个script标签其实只定义了组件的名称。

第二个script标签里才使用了setup语法糖，我们所需要编写的代码都在这里。

6.2 借助vite-plugin-vue-setup-extend插件写法

在上面的常规写法中我们定义了两个script标签。我们能不能只定义一个标签呢？答案是可以捏~

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

我们可以把这一段代码直接删除，删除后项目仍然可以直接执行。但是现在我们的组件名称就无法进行控制了。如果组件名称和文件名称不一致时就会出现问题 。我们可以借助vite-plugin-vue-setup-extend插件进行扩展，完成组件名称的定义。

6.2.1 安装命令

npm install vite-plugin-vue-setup-extend -D 

• -D表示该依赖添加在package.json里面的devDependencies

6.2.2 进行配置

进入vite.config.ts进行引入

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

然后追加调用

plugins:[
    vue(),
    vueSetupExtend()
]

配置完后重启项目

6.2.3 详细代码

<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>年龄：{{ age }}</h3>
        <h3>电话：{{ tel }}</h3>
        <h3>简介：{{ introduction }}</h3>
        <button @click="changeAge">修改年龄</button>
        <button @click="showIntroduction">修改简介</button>
    </div>
</template>

<!-- 在这里相当于编写了setup函数并且进行了return -->
<script lang="ts" setup name="PersonNomi">
   
    let name = "nomi糯米";
    let age = 20;
    let tel = "18888888888";
    let introduction = "大声喊出超喜欢！";

function changeAge() {
    age += 1;
    console.log(age);
}

function showIntroduction() {
    introduction = "大声喊出超喜欢！(^ ~ ^)";
    console.log(introduction);
}
</script>

<style scoped>
.person {
    width: 500px;
    margin: 0 auto;
    border: solid #006effc1 2px;
    box-shadow: #006effc1 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    width: 80px;
    border: none;
    color: #fff;
    background-color: #006effc1;
    border-radius: 40px;
    padding: 5px;
    margin: 0 5px;
}
</style>

在上面的代码中，现在只剩下了一个script标签，并且在标签内多了name属性来支持组件名称的修改

小结

• Vue 3 的 <script setup> 语法糖是 setup() 函数的一个语法层面的糖衣，它提供了更简洁的组件定义方式。使用 <script setup>，你可以直接在 <script setup> 标签内编写 Composition API 的代码，而无需显式地定义 setup() 函数。此外，<script setup> 中的顶层绑定（如响应式引用、计算属性等）会自动暴露给模板，无需通过 return 语句返回。

扩展

• 如果需要指定语言可以在script中使用lang属性
• 例如指定使用TypeScript语言<script lang="ts" setup></script>
• vite-plugin-vue-setup-extend 是一个 Vite 插件，旨在通过扩展的方式给 Vue 3 的 setup 函数添加新的功能。虽然这个插件不是 Vue 或 Vite 官方直接提供的，并不是所有Vite项目都会广泛采用，但它为开发者提供了一种增强 setup 函数能力的途径。

---

欢迎大家订阅此免费专栏

往期文章：
编写第一个Vue3.0组合式组件
编写并分析Vue3.0的入口文件和根组件
Vue3项目创建及项目结构分析