如何快速上手 Petite-Vue：面向初学者的完整渐进式增强指南

Petite-Vue 是 Vue.js 官方推出的轻量级渐进式增强框架，专为在现有HTML页面中"点缀"少量交互而生。这个仅有6kb大小的JavaScript库提供了与标准Vue相同的模板语法和响应式心智模型，但针对服务器渲染的页面进行了特别优化。

🚀 快速开始：两种安装方式

CDN 引入（推荐新手）

最简单的方式是通过 CDN 直接引入，无需任何构建步骤：

<script src="https://unpkg.com/petite-vue" defer init></script>

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">点击计数</button>
</div>

• v-scope 标记页面中由 Petite-Vue 控制的区域
• defer 属性确保脚本在HTML解析完成后执行
• init 属性启用自动初始化功能

NPM 安装（适合项目集成）

npm install petite-vue

然后在你的 JavaScript 文件中导入：

import { createApp } from 'petite-vue'

createApp({
  count: 0,
  increment() {
    this.count++
  }
}).mount()

🎯 核心功能特性详解

响应式数据绑定

Petite-Vue 的核心是响应式系统，基于 @vue/reactivity 构建：

<div v-scope="{ message: 'Hello World', visible: true }">
  <p v-show="visible">{{ message }}</p>
  <input v-model="message" />
</div>

条件渲染与列表渲染

支持完整的 Vue 模板语法：

<div v-scope="{ items: ['Apple', 'Banana', 'Orange'], showList: true }">
  <div v-if="showList">
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</div>

生命周期事件

监听组件的挂载和卸载事件：

<div 
  v-if="show" 
  @vue:mounted="console.log('组件已挂载')"
  @vue:unmounted="console.log('组件已卸载')"
></div>

💡 高级用法与最佳实践

组件化开发

虽然 Petite-Vue 的组件概念更简单，但仍支持逻辑复用：

function Counter(initialCount) {
  return {
    count: initialCount,
    increment() {
      this.count++
    }
  }
}

createApp({
  Counter
}).mount()

全局状态管理

使用 reactive 创建全局状态：

import { createApp, reactive } from 'petite-vue'

const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

🛠️ 实际应用场景

渐进增强现有页面

Petite-Vue 最适合的场景是在已有的服务器渲染页面中添加交互功能。比如：

• 在静态博客中添加评论计数
• 在电商产品页面添加收藏功能
• 在文档页面添加交互式示例

性能优化技巧

1. 使用模板元素：通过 <template> 元素定义可复用模板
2. 明确挂载目标：限制 Petite-Vue 只处理特定区域
3. 避免过度使用：只在需要交互的地方使用

⚠️ 注意事项与限制

安全考虑

由于 Petite-Vue 会评估模板中的 JavaScript 表达式，如果挂载到包含用户提交HTML的区域，可能存在XSS风险。建议：

• 使用明确的挂载目标
• 对用户提交的内容进行HTML清理
• 仅在受控区域使用

不支持的 Vue 功能

为了保持轻量级，Petite-Vue 省略了以下功能：

• 虚拟DOM和渲染函数
• 过渡动画系统
• 集合类型的响应式（Map、Set等）
• 深度解构等高级特性

📈 与其他框架对比

与标准 Vue 对比

Petite-Vue 不是标准 Vue 的替代品，而是补充。选择标准 Vue 当需要：

• 单页应用程序
• 复杂的组件架构
• 服务器端渲染

与 Alpine.js 对比

• 更小的体积：Petite-Vue 只有 Alpine 的一半大小
• 更好的 Vue 兼容性：语法和行为与标准 Vue 保持一致
• Vue 生态系统：作为 Vue 官方项目，享受更好的生态支持

🎉 开始你的 Petite-Vue 之旅

现在你已经了解了 Petite-Vue 的核心概念和使用方法，是时候动手实践了！记住：

• 从简单的计数器开始
• 逐步添加更复杂的交互
• 只在需要的地方使用
• 享受渐进式增强带来的开发乐趣

Petite-Vue 让前端交互变得简单而高效，无论你是初学者还是经验丰富的开发者，都能快速上手并在实际项目中应用。