Vue3,2 <script setup>代码

Vue3.2的特性之一是`<script setup>`，它是一个新的`<script>`语法，可以让我们更轻松地编写组件代码。下面是一个使用`<script setup>`的例子：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

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

  const title = ref('Hello, Vue3.2!')
  const content = ref('This is a demo of <script setup>.')

  setTimeout(() => {
    title.value = 'Hello, World!'
    content.value = 'This is a demo of <script setup> with reactive variables.'
  }, 2000)
</script>

在这个例子中，我们使用了`<script setup>`来导入`ref`函数，并创建了两个响应式变量`title`和`content`。我们还在`setTimeout`回调函数中修改了这两个变量的值，以测试它们是否响应式更新。

值得一提的是，在`<script setup>`中声明的变量不需要使用`const`或`let`关键字来声明，因为它们默认是常量。如果你想要将它们声明为可变变量，可以使用`ref`、`reactive`等函数来包装它们。

总之，`<script setup>`是一个非常方便的语法糖，可以让我们更快地编写Vue组件，同时还能享受到Vue3的响应式系统。