Vue3 Playground除了写demo还有啥用？新手入门和进阶技巧全知道

terry 7小时前阅读数 108 #Vue

你刚接触Vue3,是不是只把官方的Vue3 Playground当成个临时写“Hello World”、快速试错组件语法的小工具？要是这么想，那真的太可惜了——这个看起来界面简单的在线编辑器，其实藏着不少能提升前端开发效率的功能，从新手的语法纠错、API理解，到进阶开发者的跨框架集成预演、SSR/SSG适配测试，甚至还有团队分享原型的场景，今天咱们就用一问一答的方式，把Vue3 Playground的所有实用点挖透。

新手入门篇：解决学Vue3时最头疼的3个问题

很多新手抱着文档啃Vue3,遇到“setup里怎么拿到props和emit？”“响应式变量到底用ref还是reactive？”“v-model在自定义组件里怎么拆？”这类问题时，要么不敢随便改本地项目的代码怕弄乱，要么得搭半天脚手架太麻烦——这时候Playground就是最好的“训练场”。

问题1：刚学的API记不住？会不会随时有官方纠错？

记不住Vue3的API太正常了,比如Composition API里的watch有3种写法，provide/inject跨层级传值要不要加readonly？别慌，Playground自带的功能能帮你少走很多弯路。首先是语法提示和实时纠错：编辑器左侧是代码区，写代码时会像VSCode一样弹出Composition API、组件属性、模板指令的提示列表，按Tab就能补全；要是写错了，比如把ref写成Ref（注意大小写哦，Composition API里的ref函数是小写，类型注解才是大写），或者在setup里直接用this，代码下面会立刻出现红色波浪线，鼠标悬停还能看到具体的错误原因和官方文档的提示入口，点一下就能跳转到对应的API说明页。其次是实时预览：编辑器右侧是预览区，你改一行代码，预览区的内容大概1秒内就会更新，完全不用等本地项目的热重载（本地脚手架有时候卡的时候，热重载可能要等3、5秒），比如你想试watchEffect的立即执行特性，只要写个简单的例子：

<template>
  <button @click="count++">点我+1</button>
  <p>当前计数：{{ count }}</p>
  <p>上次打印时的计数：{{ prevLogCount }}</p>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
const count = ref(0)
const prevLogCount = ref(0)
// 这里加个onCleanup看看
watchEffect((onCleanup) => {
  const prev = prevLogCount.value
  console.log('watchEffect触发了，当前count是', count.value)
  onCleanup(() => {
    console.log('watchEffect清理前，上次的prevLogCount是', prev)
    prevLogCount.value = count.value
  })
})
</script>

改完立刻点按钮,就能在浏览器控制台里看到watchEffect的执行顺序和onCleanup的作用，比对着文档空想强10倍。

问题2：本地项目搭起来麻烦？想快速验证组件的兼容性？

有时候你在刷技术博客看到别人写的一个Vue3自定义组件,比如一个可拖拽的标签页组件，或者一个带动画的进度条组件，想直接拿来试试效果，或者想改改参数看看会不会变样——这时候Playground能帮你跳过“npm init vite@latest my-vue-app → cd my-vue-app → npm install → 把代码复制进去 → npm run dev”这一大串步骤，直接就能验证。那第三方组件库怎么在Playground里用呢？其实很简单，Playground支持通过CDN引入常用的UI组件库和工具库，比如Element Plus、Ant Design Vue、Axios、Lodash这些，比如你想试试Element Plus的el-input和el-button，只要在代码区的顶部加个script标签引入CDN就行（不用下载npm包哦）：

<!-- 引入Element Plus的CSS -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- 引入Vue3 -->
<script src="//unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入Element Plus的JS -->
<script src="//unpkg.com/element-plus/dist/index.full.js"></script>

引入之后,就能像在本地项目里一样用Element Plus的组件了，连注册步骤都不用——因为通过CDN引入的Element Plus是全局注册的，对了，要是你想试按需引入的组件库怎么办？比如只引入Element Plus的el-card和el-rate？别担心，Playground也支持ESM的CDN，比如用unpkg或者jsdelivr的ESM版本：

<!-- 引入Vue3的ESM版本 -->
<script type="module">
import { createApp, ref } from '//unpkg.com/vue@3/dist/vue.esm-browser.js'
import { ElCard, ElRate } from '//unpkg.com/element-plus/dist/index.esm-browser.js'
import '//unpkg.com/element-plus/dist/index.css'
const app = createApp({
  setup() {
    const score = ref(4)
    return { score }
  },
  template: `
    <el-card shadow="hover" style="width: 300px; margin: 20px auto;">
      <template #header>
        <div class="card-header">给这篇文章打个分吧～</div>
      </template>
      <el-rate v-model="score" show-score />
    </el-card>
  `
})
// 按需注册组件
app.component('ElCard', ElCard)
app.component('ElRate', ElRate)
app.mount('#app')
</script>

这样就不用加载整个组件库的代码,验证效率更高。

问题3：老师/朋友让我看Vue3的某个代码片段？怎么打开？

有时候你的Vue3老师在课上会给你分享一个代码链接,或者你的朋友遇到了Vue3的问题，把他写的代码片段发给你——这时候你不用把代码复制到本地项目里，直接用Playground的“导入功能”就能打开。那怎么导入呢？有三种方式：第一种是直接在Playground的地址栏里输入别人分享的链接；第二种是点击编辑器顶部的“Import”按钮，然后粘贴别人分享的代码、JSON配置或者GitHub仓库的文件路径；第三种是直接把本地项目的.vue文件、.js文件或者.json文件拖到编辑器左侧的文件树里，哦对了，Playground的文件树功能也很实用——你可以像在本地项目里一样创建多个文件，比如创建一个App.vue作为入口文件，创建一个components文件夹放子组件，创建一个utils文件夹放工具函数，这样就能模拟真实的Vue3项目结构，

├── App.vue
├── components
│   ├── Counter.vue
│   └── TodoList.vue
├── utils
│   └── formatTime.js
└── index.html

创建好之后,在App.vue里就能像在本地项目里一样导入子组件和工具函数了，完全不用改路径。

进阶开发篇：解决进阶开发者的3个痛点

如果你已经掌握了Vue3的基础语法,那Playground对你来说就不只是个“训练场”了，它还能帮你解决跨框架集成预演、SSR/SSG适配测试、团队原型快速分享这三个进阶开发者的痛点。

问题1：想试试跨框架集成？比如Vue3+React组件？

现在很多公司的前端项目都是混合框架的,比如老项目是React的，新项目是Vue3的，这时候就需要把React组件集成到Vue3项目里，或者把Vue3组件集成到React项目里——但集成之前，你肯定想先快速验证一下可行性，对吧？这时候Playground就能帮你预演。那怎么在Playground里实现Vue3+React的跨框架集成呢？其实也不难，只要通过CDN引入React和ReactDOM，然后用Vue3的“defineCustomElement”或者第三方库“vue3-react-integration”来封装React组件就行，比如用第三方库“vue3-react-integration”（这个库是专门用来在Vue3里渲染React组件的，支持双向绑定和插槽），先在Playground的代码区顶部加个script标签引入：

<!-- 引入Vue3的ESM版本 -->
<script type="module">
import { createApp, ref, h } from '//unpkg.com/vue@3/dist/vue.esm-browser.js'
// 引入React和ReactDOM的ESM版本
import React from '//unpkg.com/react@18/umd/react.production.min.js?module'
import ReactDOM from '//unpkg.com/react-dom@18/umd/react-dom.production.min.js?module'
// 引入vue3-react-integration的ESM版本
import { VueReact } from '//unpkg.com/vue3-react-integration/dist/vue3-react-integration.esm.js'
// 先写一个简单的React按钮组件
const ReactButton = ({ text, onClick, children }) => {
  return (
    <button
      style={{
        padding: '8px 16px',
        backgroundColor: '#42b883',
        color: '#fff',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer'
      }}
      onClick={onClick}
    >
      {text || children}
    </button>
  )
}
// 再写一个简单的React计数组件，支持双向绑定
const ReactCounter = ({ value, onChange }) => {
  return (
    <div style={{ margin: '10px 0' }}>
      <span>React组件里的计数：{value}</span>
      <div style={{ marginTop: '5px' }}>
        <ReactButton text="-1" onClick={() => onChange(value - 1)} />
        <span style={{ margin: '0 10px' }}></span>
        <ReactButton text="+1" onClick={() => onChange(value + 1)} />
      </div>
    </div>
  )
}
// 创建Vue3应用
const app = createApp({
  setup() {
    const count = ref(0)
    // 把React组件传给VueReact
    const WrappedReactButton = VueReact(ReactButton)
    const WrappedReactCounter = VueReact(ReactCounter, {
      model: {
        prop: 'value',
        event: 'change'
      }
    })
    return { count, WrappedReactButton, WrappedReactCounter }
  },
  template: `
    <div style="width: 300px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px;">
      <h3 style="margin-top: 0; color: #35495e;">Vue3+React跨框架集成预演</h3>
      <p>Vue3组件里的计数：{{ count }}</p>
      <div style="margin: 10px 0;">
        <WrappedReactButton text="Vue3控制React按钮+1" @click="count++" />
      </div>
      <WrappedReactCounter v-model="count" />
    </div>
  `
})
app.mount('#app')
</script>

改完之后立刻就能看到效果,双向绑定也正常，是不是很方便？

问题2：要做SSR/SSG项目？怎么快速测试组件的SSR兼容性？

现在很多Vue3项目都需要做SSR（服务端渲染）或者SSG（静态站点生成），比如企业官网、新闻网站、博客这些，因为SSR/SSG能提升网站的首屏加载速度和SEO效果——但不是所有的Vue3组件都能直接在SSR/SSG项目里用的，比如有些组件会在mounted或者onMounted钩子函数里直接访问window或者document对象（SSR/SSG在服务端渲染时是没有window和document对象的），这时候就会报错，那怎么快速测试组件的SSR兼容性呢？别担心，Playground支持SSR模式！只要点击编辑器顶部的“Toggle SSR”按钮，就能切换到SSR模式——切换之后，编辑器右侧的预览区会先显示服务端渲染的HTML内容，然后再进行客户端激活（hydration），要是你的组件在服务端渲染时访问了window或者document对象，预览区就会立刻报错，鼠标悬停还能看到具体的错误位置，比如你写一个这样的组件：

<template>
  <p>浏览器窗口的宽度是：{{ windowWidth }}</p>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const windowWidth = ref(0)
// 这里直接在setup的顶层访问window对象，SSR模式下会报错
// const windowWidth = ref(window.innerWidth)
// 正确的写法是在onMounted钩子函数里访问，或者用useWindowWidth这类SSR兼容的组合式API
onMounted(() => {
  windowWidth.value = window.innerWidth
  window.addEventListener('resize', () => {
    windowWidth.value = window.innerWidth
  })
})
</script>

要是你把注释掉的那行代码取消注释,切换到SSR模式之后，预览区就会立刻报错“ReferenceError: window is not defined”——这样就能快速定位到SSR兼容性问题，不用等本地SSR/SSG项目启动之后再找。

问题3：要给产品经理/UI设计师看原型？怎么快速分享？

有时候你写了一个Vue3的原型组件,比如一个新功能的交互原型，想给产品经理或者UI设计师看——但你总不能把本地项目的代码打包之后发给他们，让他们自己搭服务器看吧？这时候Playground的“分享功能”就派上用场了。那怎么分享呢？只要点击编辑器顶部的“Share”按钮，然后选择分享方式就行——有三种分享方式：第一种是生成一个永久链接，别人只要点开这个链接就能看到你的代码和预览效果，还能复制你的代码或者Fork你的项目（Fork之后别人就能修改你的代码，然后再分享给你）；第二种是生成一个二维码，别人只要用手机或者平板扫描这个二维码就能看到预览效果；第三种是生成一个嵌入代码，你可以把这个嵌入代码放到你的博客、公司的内部文档或者Notion里，别人就能直接在这些页面里看到你的代码和预览效果，哦对了，分享之前你可以选择是否隐藏代码区——要是你只想给产品经理或者UI设计师看预览效果，不想让他们看到你的代码，只要在“Share”弹窗里把“Show code”的开关关掉就行。

隐藏彩蛋篇：Playground里你可能不知道的3个小功能

除了上面提到的新手入门和进阶开发功能,Playground里还有几个隐藏的小功能，知道之后能让你的开发效率更高。

彩蛋1：支持TypeScript！

很多前端开发者现在都在用TypeScript写Vue3项目,Playground当然也支持TypeScript啦！只要在创建文件时把文件后缀改成.ts或者.vue（然后在script标签里加lang="ts"）就行，编辑器会像VSCode一样弹出TypeScript的语法提示和实时纠错，比如你想写一个带类型注解的Vue3组件：

<template>
  <div>
    <h3>TypeScript版的待办事项列表</h3>
    <input
      type="text"
      v-model="newTodoText"
      placeholder="请输入待办事项"
      @keyup.enter="addTodo"
    />
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" />
        <span :style="{ textDecoration: todo.completed ? 'line-through' : 'none' }">{{ todo.text }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 定义待办事项的类型
interface Todo {
  id: number
  text: string
  completed: boolean
}
// 待办事项列表
const todos = ref<Todo[]>([
  { id: 1, text: '学习Vue3 Playground', completed: false },
  { id: 2, text: '给这篇文章点赞', completed: false },
  { id: 3, text: '收藏这篇文章', completed: false }
])
// 新待办事项的文本
const newTodoText = ref<string>('')
// 添加待办事项的函数
const addTodo = (): void => {
  if (newTodoText.value.trim() === '') return
  todos.value.push({
    id: Date.now(),
    text: newTodoText.value.trim(),
    completed: false
  })
  newTodoText.value = ''
}
</script>
<style scoped>
div {
  width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
input[type="text"] {
  width: 250px;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}
button {
  padding: 6px 12px;
  background-color: #42b883;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>

写好之后,要是你把newTodoText的类型注解改成number，编辑器下面就会立刻出现红色波浪线，提示“类型'number'的参数不能赋给类型'string'的参数”——这样就能快速发现类型错误。

彩蛋2：支持自定义主题！

你是不是觉得Playground的默认主题太单调了？没关系，Playground支持自定义主题！只要点击编辑器顶部的“Settings”按钮，然后在“Theme”下拉菜单里选择你喜欢的主题就行——有Light、Dark、Monokai、Dracula、GitHub Light、GitHub Dark等多种主题可以选，总有一款适合你。

彩蛋3：支持下载项目！

要是你在Playground里写的代码比较完善,想把它下载到本地继续开发，怎么办？只要点击编辑器顶部的“Download”按钮，就能把整个项目打包成一个.zip文件下载下来——下载之后，解压.zip文件，然后在解压后的文件夹里运行npm install和npm run dev（或者yarn install和yarn dev，或者pnpm install和pnpm dev），就能在本地启动这个项目了，完全不用自己搭脚手架。

Vue3 Playground真的不是一个只能写“Hello World”的小工具，它是一个功能强大的在线IDE，能帮新手快速掌握Vue3的基础语法，能帮进阶开发者解决跨框架集成预演、SSR/SSG适配测试、团队原型快速分享这三个痛点，还有几个隐藏的小功能能提升开发效率，以后再学Vue3或者做Vue3项目时，别忘了先打开Vue3 Playground试试哦！