用<script setup>

可以实现什么功能？它与普通的<script>有什么不同？

使用<script setup>可以实现组件的 setup() 函数，使得组件实例被创建时，其中的代码会被执行。与普通的<script>不同的是，<script setup>中的顶层绑定会被暴露给模板，包括变量、函数声明和import引入的内容，可以在模板中直接使用，而不需要通过methods选项来暴露。此外，<script setup>还具有更少的样板内容、更简洁的代码、更好的运行时性能和更好的IDE类型推断性能等优势。同时，<script setup>还可以使用纯Typescript声明props和抛出事件。

相关问题

怎么在vscode快速生成<template> <div> </div> </template> <script setup lang="ts"> </script> <style scoped> </style>骨架

在 VS Code 中，你可以使用代码片段（Snippet）来快速生成这个骨架。以下是实现步骤：

1. 打开 VS Code，打开 `Preferences: Configure User Snippets`（快捷键为 `Ctrl+Shift+P`，然后输入该命令）。

2. 选择 `vue`，如果没有该选项，可以选择 `New Global Snippets File` 创建一个。

3. 在 `vue.json` 文件中添加以下代码：

{
  "Vue SFC": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>",
      "    $0",
      "  </div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "  $1",
      "</script>",
      "",
      "<style scoped>",
      "  $2",
      "</style>"
    ],
    "description": "Generate Vue SFC skeleton"
  }
}

4. 保存文件，并打开一个 `.vue` 文件。

5. 在 `.vue` 文件中输入 `vue`，然后按下 `Tab` 键即可快速生成上述骨架。

希望对你有所帮助！

<script setup></script>使用

Vue 3 的新语法 `<script setup>`，可以更简洁地定义组件。它是一个特殊的 `<script>` 区块，可以在其中使用响应式变量、计算属性、事件处理程序等，而无需显式地导入和声明。它会自动将这些变量和函数绑定到组件的作用域中。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="count++">Increment</button>
    <p>{{ doubleCount }}</p>
  </div>
</template>

<script setup>
  let message = 'Hello, world!'
  let count = ref(0)
  let doubleCount = computed(() => count.value * 2)
</script>

在上面的例子中，我们使用了 `ref` 和 `computed` 函数来定义响应式变量和计算属性，而不需要显式地导入和声明它们。在模板中，我们可以直接使用这些变量和函数。这使得组件的代码更加简洁和可读，同时也提高了开发效率。