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 标签中引入 Petite-Vue 并添加 defer init 属性时，Petite-Vue 会自动扫描 DOM 并初始化所有带有 v-scope 或 v-data 的元素。
{{ message }} -
方式二：通过 ES 模块导入 createApp 手动初始化 这种方式更接近于完整版 Vue 的使用，你需要显式地从模块中导入 createApp 函数，并调用它来创建应用实例，然后挂载到指定的 DOM 元素。
import { createApp } from 'https://unpkg.com/petite-vue?module'; createApp({ /* ... */ }).mount('#app');
问题所在： 如果在 HTML 中同时使用了 和 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 方案一：使用
如果你只需要简单的绑定，并且不打算使用 ES 模块导入，可以使用 defer init。在这种情况下，数据通常直接定义在 v-scope 属性中，或者在全局 window 对象上。
显示数据：
{{ item.title }}
注意： 这种方式不适用于通过 import { createApp } 来管理应用逻辑的场景。
3.2 方案二：使用 ES 模块导入 createApp (推荐，更具扩展性)
这是解决原始问题代码的最佳方法。它涉及正确的模块导入和 Petite-Vue 特有的数据管理模式。
3.2.1 步骤 1：正确的模块导入
确保只使用 ES 模块导入方式，并且导入的 URL 能够正确提供模块化的 Petite-Vue。常见的 CDN 都会提供这样的模块版本，有时需要添加 ?module 参数。
这里的关键是 type="module" 和 import { createApp }。不要再使用
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 列表渲染代码：
Petite-Vue v-for 示例 显示数据：
{{ item.title }}
运行这段代码，你将看到列表数据被正确渲染。
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，实现动态且响应式的网页内容。
