这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示
前言
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 在模板中使用的时候会自动被解包