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

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

前言

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"})

    // 将变量返回
    return{
      name,
      age,
      book
    }
  }
})
</script>

<script setup> 作为 setup 方法的语法糖,在书写上更加简洁方便,在 setup 函数中,所有 ES 模块导出都被认为是暴露给上下文的值,在 <script setup> 写法中,不需要再手动写 setup(){} .可以直接在 script 标签中书写 setup 的内容,并且不需要做 return 返回处理 .
解决了 setup 需要频繁的将 声明的变量 ,函数 ,以及 import 引入的内容通过 return 向外暴漏,才能在 <template/> 中使用的问题 , setup语法糖的形式最为便捷而且更符合开发者习惯

所以使用 <script setup> 的时候

二、如何使用 setup script 语法糖

基本语法
需要启用 <script setup> 语法糖,需要在 <script> 代码块加上 setup 属性
也就是说 : 只需在 script 标签上写上 setup 就可以了

<script setup>
	console.log('hello script setup')
</script>

里面的代码会被编译成组件 setup() 函数当中的内容
<script setup> 和 <script> 的执行时机是不同的

• 普通的 <script> 只会在组件第一次被引入的时候执行一次
• 而 <script setup> 中的代码会在每次组件实例被创建的时候执行

三、setup script 有什么用

1. 属性和方法无需返回

之前说 组合式API (composition API ) 写起来有些繁琐的原因在于需要手动返回模板需要的属性和方法,而在 setup script 中可以省略这一步骤
setup script 不需要写 return ,所以直接声明数据,方法就可以在模板中直接使用了

属性

<template>
  <div>
    <!-- 在模板中使用变量 -->
    <div> {{ name }} </div>
    <div> {{ age }} </div>
    <div> {{ book.name }} </div>
    <div> {{ book.age }} </div>
  </div>
</template>

Vue 3 setup() 语法
传统写法中我们需要在 setup 当中定义变量,并在最后 return

<script>
import {defineComponent , reactive, ref} from 'vue'
export default defineComponent({
  setup(){
    // 基本数据类型的响应式
    const name = ref("你好")
    const age = ref(2023)
    // 复杂数据类型的响应式
    const book = reactive({name:"月亮",age:"1919"})

    // 将变量返回
    return{
      name,
      age,
      book
    }
  }
})
</script>

<script setup> 语法糖的写法
不再需要对定义的变量进行 return ,我们定义的 ref reactive 变量可以直接在 template 当中直接使用

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

</script>

方法

<template>
  <div>
    <!-- 在模板中使用变量 -->
    <div @click="showMessage">点击我输出信息</div>
  </div>
</template>

Vue 3 setup() 语法
传统写法中我们需要在 setup 当中定义方法,并在最后 return

<script>
import {defineComponent} from 'vue'
export default defineComponent({
  setup(){
    const showMessage = ()=>{
      console.log("hi vue3")
    }
    // 将变量返回
    return{
      showMessage
    }
  }
})
</script>

<script setup> 语法糖的写法
不再需要对定义的方法进行 return ,我们定义的方法可以直接在 template 当中直接使用

<script setup>
    const showMessage = ()=>{
      console.log("hi vue3")
    }
</script>

小结

上方的 demo 对比可以看到完全省略了 return 中的所有内容, 嗷呜，是不是非常方便呢？
在 <script setup> 标签中声明的 “顶层的绑定” – [包括 变量,函数声明,以及 import 引入的内容] 都是可以在模板中直接使用的
在 <script setup> 标签中需要声明响应式的变量,就需要使用响应式 API 来创建 ( ref() reactive() …) , 如果在 <script setup> 标签中需要用 ref() reactive() 同样是需要手动引入ref 和 reactive 的 import {reactive, ref} from 'vue'
script setup 和 setup() 函数的返回值一样, ref 在模板中使用的时候会自动被解包