script setup是vue3中新引入的语法糖,目的是简化使用Composition API时冗长的模板代码。
例如:
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { MyButton } from '@/components'
export default defineComponent({
components: {
MyButton
},
props: {
name: String
},
setup() {
const count = ref(0)
const inc = () => count.value++
return {
count,
inc,
}
},
})
<script>
可见,当我们需要引入一个components时,不仅需要在文件头部显式import进行导入,而且需要components字段加入声明。不仅如此,在setup中声明的变量如果需要被模板使用,那么需要在setup的尾部显式return返回,如果你的组件模板使用的变量不多,那么这种情况还可以勉强接受。但是当你的变量和方法逐渐增加时,每次都要在setup后进行return返回,这无疑是一件枯燥的事情,在重构代码时,你也会面临巨大挑战。
为了解决这个问题,vue3添加了script setup语法糖提案。
像上面这段代码,使用script setup语法糖重构后,将变成:
<script setup lang="ts">
import { defineComponent, ref, defineProps } from 'vue'
import { MyButton } from '@/components'
defineProps<{
name:string
}>()
const count = ref(0)
const inc = () => count.value++
<script>
怎么样,代码是不是变得可读性更强,更优雅了。
接下来我们看一下具体的用法。
基本用法
若要使用script setup语法,只需在原vue文件中的script标签加入setup属性。
<script setup lang="ts">
<script>
使用后意味着,script标签内的内容相当于原本组件声明中setup()的函数体,不过也有一定的区别。
使用setup中的参数
<script setup="props, context" lang="ts">
<script>
像这样,只要在setup处声明即可自动导入,同时也支持解构语法:
<script setup="props, { emit }" lang="ts">
<script>
暴露变量到模板
曾经的提案中,如果需要暴露变量到模板,需要在变量前加入export声明:
export const count = ref(0)
不过在新版的提案中,无需export声明,编译器会自动寻找模板中使用的变量,只需像下面这样简单的声明,即可在模板中使用该变量
const count = ref(0)
导入component或directive
直接import即可,无需额外声明
import { MyButton } from "@/components"
import { directive as clickOutside } from 'v-click-outside'
与原先一样,模板中也支持使用kabab-case来创建组件,如
定义props,emit
<script setup>
import { defineProps, defineEmit, useContext } from 'vue'
const props = defineProps({
foo: String,
})
const emit = defineEmit(['change', 'delete'])
</script>
增强的props类型定义:
const props = defineProps<{
foo: string
bar?: number
}>()
const emit = defineEmit<(e: 'update' | 'delete', id: number) => void>()
不过注意,采用这种方法将无法使用props默认值。
获取 slots 和 attrs
<script setup lang="ts">
import { useContext } from 'vue'
const { slots, attrs } = useContext()
</script>
await语法支持
在script setup内可以直接使用await语法:
<script setup>
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>
定义组件其他字段
在script setup内使用export default,其内容会被处理后放入原组件声明字段。
<script setup>
export default {
name: "MyComponent"
}
</script>
vscode配套插件使用
volar是一个vscode插件,用来增强vue编写体验,使用volar插件可以获得script setup语法的最佳支持。
原文链接:学习使用
https://blog.csdn.net/qq_17794813/article/details/117381219