vue3 script setup 语法糖用了才知道有多爽 (一)-CSDN博客

本文链接：https://blog.csdn.net/YZRHANYU/article/details/129617852

文章介绍了Vue3.2引入的setupscript语法糖，它是组合式API的编译时语法糖，简化了组件的编写。使用setupscript，开发者无需在setup函数中返回属性和方法，直接在script标签内声明即可在模板中使用，提高了开发效率。同时，文章强调了从Vue2到Vue3的转变，建议对Vue3基础有了解后再学习setupscript。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示
在这里插入图片描述

前言

vue3 使用的越来越广泛, 公司项目开始使用 vue3 ,在 vue 3.2 之后新加入了 script setup 语法糖,上手开始看项目发现对于语法糖的使用有一些迷惑,特此整理,在整理这些内容的同时查阅了大量的资料,自己在这个过程中,对于 vue3 的理解也更深了一些 ~ 希望各位也可以从中有所收获
因为很多地方都不太理解 , 本文的分析程度比较细致 , 甚至可能到了有些太细致的程度 ~

一、什么是setup script

<script setup> 是在单文件组件中使用组合式 API 的 " 编译时 " 语法糖 ,当同时使用单文件组件以及组合式 API 的时候, <script setup> 是更为推荐的一种语法方式,它有着更多的优势
但在说这些优势之前需要先说一下,从 Vue 3.2 版本之后才开始加入了 <script setup> 语法糖,这一语法糖的加入让 Vue3 的写法有了大大的改变 ! 相对于原本 Vue 3 的语法,简单了很多很多很多 !

因为 <script setup> 语法糖是依赖于 Vue3 的,所以如果对 Vue3 还没有太多的了解,建议先学习下 Vue3 之后再开始学习 <script setup> 语法糖,直接上来搞这个理解起来容易混乱 [ 本人因为公司使用的是 Vue3+TS ,但是在此之前一直用的是 Vue2 ,直接开始看项目之后属实懵逼了,建议各位同仁循序渐进啊 ~ ]

以下是官方的介绍
在这里插入图片描述
在 Vue 3 当中我自己感觉最鲜明的变化就是 Vue 3 中引入了组合式 Api (composition API)
但是使用 Vue3 组合式 API 的时候感觉整个过程比较繁琐

在 setup () 当中定义 ⇒ setup() 中 return ⇒ 模板中使用

如果需要定义一个方法的话,模板中使用这个方法的时候,需要在 setup 函数中将它返回,模板中需要用到的大量的方法和属性都需要一一返回 , 这个过程有点难受,时不时的就会漏掉返回这一步导致变量未定义或者　xx not a function 的错误

<script>
import {
   defineComponent , reactive, ref} from 'vue'
export default defineComponent({
   
  setup(){
   
    // 基本类型变量
    const name = ref("你好")
    const age = ref(2023)
    // 引用类型变量
    const book = reactive({
   name:"月亮",age:"1919"})

    // 将变量返回