当前位置：首页 > news >正文

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

news 2025/9/11 19:01:51

相同点

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

不同点

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

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

使用

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

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

<script lang="ts">
export const componentName = 'MyComponent';export default {name: componentNameinheritAttrs: 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>