这个工具是什么
Vue 3 在线运行工具把一份组件拆成「模板 / 脚本 / 样式」三栏，左边写完右边立刻渲染。跑的是 Vue 官方的浏览器运行时（带模板编译器），写法与单文件组件里的 <script setup> 非常接近，区别只是通过全局的 Vue 对象取 API。
适合在不想起本地项目的场合验证一个组件的写法：响应式数据怎么更新、computed 什么时候重算、指令用对没有。
什么时候用它
- 验证
ref与reactive在某个场景下的更新行为，比如解构后为什么丢了响应式。 - 调试
v-for的key、v-model修饰符、动态组件的写法。 - 试
computed与watch的触发时机，用 console.log 观察执行顺序。 - 给同事演示一个最小的复现场景，把「复制完整 HTML」的结果发过去，对方用浏览器打开就能跑。
- 调一个小交互的样式，改 CSS 立即看到效果。
有什么限制
- 脚本栏写的是
setup()的函数体，需要自己return出模板要用的变量。 - 不支持
import语句，也不能引入第三方组件库或 Pinia、Vue Router。 - 模板里用的是运行时编译，所以
<script setup>的编译期语法糖（如defineProps的宏）不适用。 - 预览在沙箱 iframe 里，脚本访问不到本站页面的任何数据，也因此无法发起需要同源凭据的请求。
- 引用的 Vue 运行时取自本站打包的版本，与最新版官方 CDN 可能有小版本差异。
常见问题
Q：为什么我写的 const { count } = toRefs(state) 之后模板不更新？
A：这类响应式丢失问题正好可以在控制台里用 console.log 验证。检查是否用了解构普通对象而不是 toRefs，或是否在 setup 外修改了数据。
Q：能直接粘贴一个 .vue 单文件组件吗？
A：不能。这里按三栏拆分，请把 <template>、<script setup>、<style> 里的内容分别贴进对应栏，并把 <script setup> 里的顶层声明放进脚本栏。
Q：预览里的报错看不到行号？ A：iframe 跨源拿不到完整的堆栈信息，控制台会给出错误消息与行号提示。定位不准时可以分段注释脚本栏来缩小范围。
Q：能装 Element Plus 之类的组件库吗？ A：不能。需要第三方库的场景请在本地项目里调试。