「这是我参与2022首次更文挑战的第42天，活动详情查看：2022首次更文挑战」。

我在写关于Vue3新特性系列的文章，今天的主要讲讲在Vue3中新特性中的script setup。

在 Vue 3 中，引入了<script setup>功能。它是在单个文件组件中使用 Composition API 的编译时语法糖。此语法允许开发人员定义组件，而无需从 JavaScript 代码块中导出任何内容。它将所有顶级绑定暴露给模板。

简单来说，这种语法使单文件组件更简单，让开发者感觉拥有原生 JavaScript 代码体验。

用 RFC 的话来说，“该提案的主要目标是通过将<script setup>的上下文直接暴露给模板来减少单个文件组件 (SFC) 中组合 API 使用的冗长性。”

`<script>`和`<script setup>`的区别

性能

<script setup>具有更好的运行时性能，因为它将模板编译到具有相同范围的渲染方法中，而无需中间代理。 <script> 使用中间代理编译模板。

代码语法

在 <script> 块中，我们需要使用样板代码导出模块。 <script setup> 允许我们定义组件而无需导出任何内容。在 <script setup> 块中，我们可以使用更少的样板获得更简洁的代码。

执行流程

<script> 块在我们第一次导入组件时执行。 <script setup> 块将在每次创建组件实例时执行。

组织代码

我们可以根据 <script setup> 块内的业务逻辑来组织代码。 <script> 块是不可能的，因为我们必须遵循 Vue 的 Options API 或 Composition API 的编码结构。

如何使用?

只需导入组件即可在模板中使用它们，因为编译器会自动将它们添加到我们的应用程序中。<script setup> 范围内的值也可以直接用作自定义组件标签名称：

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

将 MyComponent 视为作为变量引用。如果你使用过 JSX，这里的模型是相似的。 kebab-case 等效的 <my-component> 也适用于模板 - 但是强烈建议使用 PascalCase 组件标签以保持一致性。它还有助于区分原生自定义元素。

顶层绑定被暴露给模板

<script setup> 将其所有顶级绑定（包括变量、方法和导入）暴露给模板。我们可以直接在模板表达式中使用导入的辅助方法，而无需通过方法选项公开它。

<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

使用递归组件

单个文件组件可以通过其文件名隐式引用自身。例如，名为 FooBar.vue 的文件可以在其模板中将自己称为。

需要注意的是，它的优先级低于导入的组件。如果命名导入与组件的推断名称冲突，可以为导入设置别名。

import { FooBar as FooBarChild } from './components'

使用动态组件

所有导入的组件都被引用为变量，因此我们可以将它们与 :is 绑定一起用于模板中的动态组件绑定。

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

使用生命周期钩子

我们可以使用 onX 方法注册组件的生命周期钩子，可以从 vue 库中导入。

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log("Hello World");
})
</script>

defineProps() 和 defineEmits()

要声明具有完整类型推断支持的 props 和 emits 等选项，我们可以使用 defineProps() 和 defineEmits API，它们在 <script setup> 中可用.

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

使用计算属性

我们可以声明一个计算属性，它会根据更改的属性或数据随时自动更新。

<template>
  <button @click="number++">Click</button>
  <p>The square of{{number}} is {{square}}</p>
</template>

<script setup>
import { ref,computed } from 'vue'

const number = ref(0);

const square = computed(() => {
    return number.value * number.value;
})
</script>

Vue3新特性系列：script setup

<script>和<script setup>的区别

性能