Vue3中的＜script setup＞和＜script＞的区别

码飞飞

已于 2023-11-29 16:36:07 修改

阅读量1.2k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 组件前端

于 2023-11-29 16:28:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43820866/article/details/134689200

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue3中<scriptsetup>与<script>标签的不同之处，<scriptsetup>会预处理为setup()函数，而<script>仅初次执行。作者分享了如何利用这些差异存放字面量和TS类型声明的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相同点

在一个 Vue3 单文件组件 (SFC)中，<script setup> 和 <script> 它们各自最多只能存在一个。

不同点

<script setup> 这个脚本块将被预处理为组件的 setup() 函数，这意味着它将为每一个(也可以说每一次)组件实例都执行。

<script> 只在组件被首次引入的时候执行一次，其它地方引入或再次实例化都不会再执行。

使用

所以我们可以利用这个差异性做一些事情。

1、除`<script setup>` 标签外再起一个`<script>`标签来存放一些字面量。

<script lang="ts">
export const componentName = 'MyComponent';

export default {
	name: componentName
	inheritAttrs: false,
	customOptions: {}
}
</script>
<script setup lang="ts">
// ...
console.log(componentName)
</script>

2、除`<script setup>` 标签外再起一个`<script>`标签来存放TS类型声明。

<script lang="ts">
export type Test = {
  aaa: string
}

// 底部必须要有export或非TS类型申明代码，否则vscode中下方代码颜色会出现异常，原因未知
export {}
</script>
<script setup lang="ts">
// ...
const obj: Test = { aaa: '1' }
</script>