1. 引言：Petite-Vue 简介与 v-for 挑战
petite-vue 作为 vue.js 的轻量级子集，以其极小的体积和渐进式增强的特性，在只需要少量交互的静态页面中表现出色。它允许开发者直接在 html 中使用 vue 的指令，如 v-for、v-bind、v-on 等，从而快速实现动态内容。然而，初学者在使用 v-for 进行列表渲染时，常会遇到数据无法正确显示的问题。这通常不是 v-for 指令本身的问题，而是与 petite-vue 的初始化方式或数据管理模式有关。
2. 问题分析：常见的初始化与数据管理误区
导致 Petite-Vue v-for 不渲染的主要原因通常有以下两点：
2.1 误区一：重复或冲突的 Petite-Vue 初始化方式
Petite-Vue 提供了两种主要的初始化方式，它们不能同时使用，否则会导致冲突或其中一种失效：
-
方式一：通过 <script defer init> 属性自动初始化</script> 当你在 script 标签中引入 Petite-Vue 并添加 defer init 属性时，Petite-Vue 会自动扫描 DOM 并初始化所有带有 v-scope 或 v-data 的元素。
<script src="https://unpkg.com/petite-vue" defer init></script> <!-- 此时 Petite-Vue 会自动初始化 --> <div v-scope="{ message: 'Hello' }"> {{ message }} </div> -
方式二：通过 ES 模块导入 createApp 手动初始化 这种方式更接近于完整版 Vue 的使用，你需要显式地从模块中导入 createApp 函数，并调用它来创建应用实例，然后挂载到指定的 DOM 元素。
import { createApp } from 'https://unpkg.com/petite-vue?module'; createApp({ /* ... */ }).mount('#app');
问题所在： 如果在 HTML 中同时使用了 <script src="...petite-vue" defer init></script> 和 import { createApp } from '...'，就会导致 Petite-Vue 被初始化两次，或者其中一种初始化方式覆盖了另一种，从而使得预期的数据绑定和指令失效。
2.2 误区二：createApp 中不正确的数据结构
与完整版 Vue 3 不同，Petite-Vue 的 createApp 函数在定义组件状态时，并不需要一个 data() 方法来返回响应式数据。如果你尝试像 Vue 3 那样使用 data() 方法，Petite-Vue 将无法正确识别你的数据。
立即学习“前端免费学习笔记（深入）”；
错误示例：
createApp({
data() { // Petite-Vue 不支持这种方式
return {
items: []
}
},
mounted() {
this.items = jsonData
}
}).mount('#app')在 Petite-Vue 中，你需要直接将响应式数据作为 createApp 配置对象的属性来定义。
3. 解决方案：正确使用 Petite-Vue 进行列表渲染
针对上述问题，我们提供以下两种解决方案，重点关注使用 createApp 的方式，因为它更灵活且与问题代码更为贴近。
3.1 方案一：使用 <script defer init> 配合 v-scope (快速原型开发)</script>
如果你只需要简单的绑定，并且不打算使用 ES 模块导入，可以使用 defer init。在这种情况下，数据通常直接定义在 v-scope 属性中，或者在全局 window 对象上。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/petite-vue" defer init></script>
</head>
<body>
<h1>显示数据：</h1>
<div id="app" v-scope="{ items: [{ title: 'Title 1'}, { title: 'Title 2'}, { title: 'Title 3'}] }">
<div v-for="(item, index) in items" :key="index">
<h2>{{ item.title }}</h2>
</div>
</div>
</body>
</html>注意： 这种方式不适用于通过 import { createApp } 来管理应用逻辑的场景。
3.2 方案二：使用 ES 模块导入 createApp (推荐，更具扩展性)
这是解决原始问题代码的最佳方法。它涉及正确的模块导入和 Petite-Vue 特有的数据管理模式。
3.2.1 步骤 1：正确的模块导入
确保只使用 ES 模块导入方式，并且导入的 URL 能够正确提供模块化的 Petite-Vue。常见的 CDN 都会提供这样的模块版本，有时需要添加 ?module 参数。
<!-- 移除 <script src="https://unpkg.com/petite-vue" defer init></script> -->
<!-- 只保留以下模块导入 -->
<script type="module">
import { createApp } from "https://cdn.skypack.dev/petite-vue";
// 或者 import { createApp } from "https://unpkg.com/petite-vue?module";
// ...
</script>这里的关键是 type="module" 和 import { createApp }。不要再使用 <script defer init>。</script>
3.2.2 步骤 2：直接的数据状态管理
在 createApp 中，直接将你的数据对象作为其参数的属性。Petite-Vue 会自动将其转换为响应式数据。
const jsonData = [
{ title: "Title 1" },
{ title: "Title 2" },
{ title: "Title 3" },
];
createApp({
// 直接定义数据属性，而不是 data() 方法
items: jsonData,
// 如果有方法，也直接定义
// someMethod() { /* ... */ }
}).mount("#app");Petite-Vue 没有 mounted 生命周期钩子，也不需要 data() 方法。所有需要在应用启动时可用的数据，都直接作为 createApp 参数对象的属性。
3.2.3 完整示例代码
结合上述修正，以下是完全正确的 Petite-Vue 列表渲染代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Petite-Vue v-for 示例</title>
</head>
<body>
<h1>显示数据：</h1>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<h2>{{ item.title }}</h2>
</div>
</div>
<script type="module">
// 确保只通过 ES 模块导入 Petite-Vue，并且只导入一次
import { createApp } from "https://cdn.skypack.dev/petite-vue";
const jsonData = [
{ title: "Petite-Vue 教程" },
{ title: "解决 v-for 问题" },
{ title: "正确初始化与数据管理" },
];
// 直接将数据作为 createApp 参数对象的属性
createApp({
items: jsonData, // 数据直接绑定到这里
}).mount("#app");
</script>
</body>
</html>运行这段代码，你将看到列表数据被正确渲染。
4. 注意事项与最佳实践
- 单一初始化原则： 永远只选择一种 Petite-Vue 的初始化方式。如果你使用了 createApp，就不要再使用 defer init，反之亦然。
- 理解 API 差异： Petite-Vue 并非 Vue 3 的完整复制。它是一个精简版，因此在 API 和生命周期钩子方面会有所不同。请查阅 Petite-Vue 的官方文档以了解其确切的 API。例如，它没有 data() 方法，也没有 mounted() 钩子。
- 调试技巧： 当遇到问题时，利用浏览器的开发者工具检查控制台是否有错误信息。检查 DOM 结构，确保 Petite-Vue 已经正确挂载到目标元素，并且数据已成功绑定。
- CDN 选择： 某些 CDN 可能提供不同版本的 Petite-Vue。确保你使用的 URL 能够提供 ES 模块版本，通常可以通过 ?module 参数或特定的 CDN 路径来识别。
5. 总结
Petite-Vue 是一个强大的轻量级工具，能够以极低的成本为静态页面带来交互性。v-for 指令是其核心功能之一，用于高效地渲染列表数据。解决 v-for 不渲染的问题，关键在于理解并遵循 Petite-Vue 的初始化规则和数据管理模式。通过避免重复初始化和正确地将数据直接作为 createApp 的属性，你可以轻松地驾驭 Petite-Vue，实现动态且响应式的网页内容。
