Petite-Vue 简介与 v-for 基础
petite-vue 是 vue.js 的轻量级版本，专为渐进式增强而设计，允许开发者在不引入完整构建工具链的情况下，为现有 html 页面添加响应式功能。其核心功能之一便是 v-for 指令，用于渲染列表数据。然而，初学者在使用 v-for 时常会遇到数据不渲染的问题，这通常源于对 petite-vue 初始化机制和状态管理方式的误解。
v-for 循环不渲染的常见原因与解决方案
当 Petite-Vue 的 v-for 循环未能按预期渲染数据时，通常是以下两个主要原因造成的：
- 重复或冲突的初始化方式
- 不正确的组件状态（data）声明
下面我们将逐一分析并提供解决方案。
1. 初始化冲突：defer init 与 createApp 模块导入的抉择
Petite-Vue 提供了两种主要的初始化方式，它们不能同时使用，否则会导致冲突。
-
声明式初始化 (defer init)： 通过在 <script> 标签中添加 defer init 属性，Petite-Vue 会自动扫描页面中带有 v-scope 属性的元素并进行初始化。在这种模式下，你不需要显式调用 createApp。</script>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <!-- 声明式初始化：Petite-Vue 会自动查找 v-scope --> <script src="https://unpkg.com/petite-vue" defer init></script> </head> <body> <h1>显示数据：</h1> <div id="app" v-scope="{ items: [{ title: 'Item A' }, { title: 'Item B' }] }"> <div v-for="(item, index) in items" :key="index"> <h2>{{ item.title }}</h2> </div> </div> </body> </html>注意： 当使用 defer init 时，你的数据可以直接在 v-scope 属性中定义，或者通过 v-scope 引用一个全局对象。
立即学习“前端免费学习笔记（深入）”；
-
编程式初始化 (createApp 模块导入)： 如果你希望更精细地控制应用程序的创建和挂载，或者需要导入其他模块，可以使用 ES Modules 方式导入 Petite-Vue 并调用 createApp。在这种情况下，不应在 <script> 标签中包含 defer init 属性。</script>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </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"> // 编程式初始化：通过模块导入 createApp // 注意：这里导入的 URL 需要带 ?module 后缀，或者使用 Skypack 等 CDN import { createApp } from "https://unpkg.com/petite-vue?module"; // 或者使用原问题中的 Skypack CDN // import { createApp } from "https://cdn.skypack.dev/petite-vue"; const jsonData = [ { title: "标题 1" }, { title: "标题 2" }, { title: "标题 3" }, ]; createApp({ // 数据直接作为 createApp 的属性 items: jsonData, }).mount("#app"); </script> </body> </html>关键点： 如果你选择 createApp 方式，请确保 Petite-Vue 的导入 URL 能够正确作为 ES Module 加载（例如，https://unpkg.com/petite-vue?module 或 https://cdn.skypack.dev/petite-vue）。
错误示例分析： 原始问题中的代码同时使用了 <script src="https://unpkg.com/petite-vue" defer init></script> 和 import { createApp } from 'https://cdn.skypack.dev/petite-vue'，这导致了初始化冲突，Petite-Vue 无法正常工作。解决方案是二选一。
2. 不正确的组件状态（data）声明
与完整的 Vue.js 不同，Petite-Vue 的 createApp 函数接受一个对象作为参数，该对象的属性直接作为组件的状态。它没有 data() 方法。
错误示例分析： 原始问题中尝试使用 data() { return { items: [] } } 来声明状态，这是完整 Vue.js 的写法，但在 Petite-Vue 中是无效的。
正确做法： 将你的响应式数据直接作为 createApp 函数参数对象的属性。
createApp({
// 正确：直接声明 items 属性
items: jsonData,
// 其他状态属性...
message: 'Hello Petite-Vue'
}).mount("#app");完整的正确示例代码
综合上述解决方案，以下是一个使用 createApp 进行编程式初始化并正确声明状态的完整示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Petite-Vue v-for 列表渲染示例</title>
</head>
<body>
<h1>Petite-Vue 动态数据列表</h1>
<div id="app">
<!-- v-for 循环渲染 items 数组 -->
<div v-for="(item, index) in items" :key="index">
<h2>{{ item.title }}</h2>
</div>
</div>
<script type="module">
// 1. 正确导入 Petite-Vue 作为 ES Module
import { createApp } from "https://cdn.skypack.dev/petite-vue";
// 提示：你也可以使用 "https://unpkg.com/petite-vue?module"
// 示例数据
const jsonData = [
{ title: "Petite-Vue 教程：列表项一" },
{ title: "Petite-Vue 教程：列表项二" },
{ title: "Petite-Vue 教程：列表项三" },
];
// 2. 使用 createApp 初始化应用，并直接声明状态属性
createApp({
// 'items' 直接作为组件的状态属性
items: jsonData,
// 如果有其他方法或计算属性，也可以在这里定义
// greet() { return 'Hello!'; }
}).mount("#app"); // 3. 将应用挂载到 id 为 'app' 的元素上
</script>
</body>
</html>注意事项与最佳实践
- 选择唯一的初始化方式： 务必只选择 defer init 搭配 v-scope 或 createApp 模块导入这两种方式中的一种。
- 状态直接声明： 在 createApp 中，状态（如 items）应直接作为对象的属性，而不是包裹在 data() 方法中。
- key 属性的重要性： 在 v-for 循环中，始终为每个循环项提供一个唯一的 :key 属性。这有助于 Petite-Vue 更高效地更新 DOM，尤其是在列表项顺序变化或增删时。本教程示例中使用了 index 作为 key，但在实际应用中，如果数据有唯一 ID，优先使用唯一 ID 作为 key。
- 资源与文档： Petite-Vue 的官方文档是学习和解决问题的最佳资源。尽管其社区和教程相对较少，但其 API 与 Vue 3 核心 API 高度相似，因此许多 Vue 3 的概念和模式也适用于 Petite-Vue。
总结
Petite-Vue 是一个强大的轻量级框架，能够有效简化网页的交互逻辑。掌握其正确的初始化流程和状态管理方式是高效使用它的关键。通过避免初始化冲突和正确声明数据，你可以轻松利用 v-for 指令渲染动态列表，为你的网页增添响应式活力。
