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

相同点

在一个 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>

参考

• 链接1
• 链接2
• 链接3