查看vue的在线工具：Vue SFC Playground

https://play.vuejs.org/

这个工具可以把Vue文件的内容转换为运行时的内容

示例：
App.vue文件的内容如下：

<script setup>
const message = "this is message";
const logMessage = () => {
  console.log(message);
}
</script>



<template>
  <div>
    {{ message }}
    <button @click="logMessage">log</button>
  </div>
</template>

将App.vue文件的内容拷贝到Vue SFC Playground在线工具的左侧，在右侧可以转化为运行时的代码：

示例：
App.vue的文件内容如下：

<script setup>
/* // 首先从vue中导入reactive函数
import { reactive } from 'vue'

// 执行ref函数，它接收简单类型或者对象类型的数据传入，用变量接收
// ref函数返回一个响应式对象
const state = reactive({
  count: 100
})

const changeCount = () => {
  // 注意：组合式API中，在此处使用state不用this，因为this的值是undefined
  state.count++
} */

// 从vue中导入ref函数
import { ref } from 'vue'

// 执行ref函数，它接收简单类型或者对象类型的数据传入。ref函数返回一个响应式对象，用变量接收
const count = ref(0)

const changeCount = () => {
  // 在脚本区域想修改由ref()函数产生的响应式对象的值，必须通过.value的属性
  count.value++
}
</script>

<template>
  <div>
    <!-- 在模版中引用响应式对象 -->
    <button @click="changeCount">{{ count }}</button>
  </div>
</template>

在右侧的PREVIEW窗口可以看到输出：

点击按钮，按钮上的值增加了1：