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项目创建及项目结构分析