使用script setup语法糖优化你的vue3代码

使用折扣代码叠加优惠：一些网站允许同时使用多个代码 #生活技巧# #节省生活成本# #购物优惠技巧# #折扣代码#

注意：本文章写于setup语法糖早期提出阶段，如今部分用法已经更改，最新的用法请以官方最新提案为主。

请移步官方文档     https://v3.vuejs.org/api/sfc-script-setup.htmlhttps://v3.vuejs.org/api/sfc-script-setup.html

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来创建组件，如<my-button />

定义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语法的最佳支持。

网址：使用script setup语法糖优化你的vue3代码 https://www.yuejiaxmz.com/news/view/278839

相关内容

（三）基于vue3的网页设备连接阿里云生活物联网平台/物联网平台（附代码）
Vue3实现闪烁文本组件
script type=“text/JavaScript”是什么
低功耗设计策略：延长嵌入式设备的电池寿命代码实战
“import ... =“ 只能在typescript 文件中使用（解决方法）
提高代码优化工作效率的几点方法
JavaScript常用优化分享（三）
【宝藏系列】嵌入式 C 语言代码优化技巧【超详细版】
【读书笔记】代码大全26章：代码优化技术
使用 LangChain 的 RecursiveCharacterTextSplitter 进行代码分割

随便看看