Vue3.0的新语法糖-script setup

2021-11-21 15:58:19 阅读：240 来源： 互联网

标签：count const script setup Vue3.0 import 模板

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

标签：count,const,script,setup,Vue3.0,import,模板
来源： https://blog.csdn.net/qq_43869822/article/details/121454701

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3.0的新语法糖-script setup