Vue3.0的新语法糖-script setup

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

上一篇:pytest入门与基础用法


下一篇:vue3.2版本新特性