编辑“︁Vue.js列表渲染”︁

{{DISPLAYTITLE:Vue.js列表渲染}}  
'''Vue.js列表渲染'''是Vue.js框架中用于动态生成一组DOM元素的核心功能，通过数据驱动的方式高效管理列表的展示与更新。本章将详细介绍其语法、原理、性能优化及实际应用场景。

== 概述 ==  
Vue.js使用<code>v-for</code>指令实现列表渲染，允许开发者基于数组或对象循环生成模板内容。其核心思想是**数据与视图的自动同步**：当数据变化时，视图会响应式更新。

== 基础语法 ==  
=== 数组渲染 ===  
通过<code>v-for</code>遍历数组，语法为<code>item in items</code>，其中<code>items</code>是数据源，<code>item</code>是当前迭代项：

<syntaxhighlight lang="html">
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Apple' },
        { id: 2, text: 'Banana' },
        { id: 3, text: 'Cherry' }
      ]
    };
  }
};
</script>
</syntaxhighlight>

'''输出结果'''：  
* Apple  
* Banana  
* Cherry  

=== 对象渲染 ===  
<code>v-for</code>也可遍历对象的属性，提供值、键和索引：

<syntaxhighlight lang="html">
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>
</syntaxhighlight>

== 关键特性 ==  
=== <code>:key</code>的作用 ===  
为每个渲染项分配唯一<code>key</code>（通常为ID），帮助Vue识别节点差异以高效更新DOM。若省略，可能导致渲染错误或性能下降。

=== 数组更新检测 ===  
Vue能检测以下数组方法并触发视图更新：  
* <code>push()</code>, <code>pop()</code>  
* <code>shift()</code>, <code>unshift()</code>  
* <code>splice()</code>, <code>sort()</code>, <code>reverse()</code>  

直接通过索引修改项（如<code>items[0] = newValue</code>）不会触发更新，需使用<code>Vue.set</code>或<code>this.$set</code>。

== 高级用法 ==  
=== 范围迭代 ===  
生成固定次数的重复内容：

<syntaxhighlight lang="html">
<span v-for="n in 5">{{ n }} </span>
</syntaxhighlight>

'''输出'''：1 2 3 4 5  

=== 结合<code>v-if</code> ===  
在同一元素上避免同时使用<code>v-for</code>和<code>v-if</code>（优先级问题），推荐用计算属性过滤数据：

<syntaxhighlight lang="javascript">
computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive);
  }
}
</syntaxhighlight>

== 性能优化 ==  
* 使用<code>v-for</code>时始终提供<code>:key</code>  
* 对大列表采用虚拟滚动（如[vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)）  
* 避免不必要的响应式数据嵌套  

== 实际案例 ==  
=== 动态表格渲染 ===  
<syntaxhighlight lang="html">
<table>
  <tr v-for="user in users" :key="user.id">
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
  </tr>
</table>
</syntaxhighlight>

=== 嵌套列表 ===  
<mermaid>
graph TD
  A[Parent List] --> B[Child List 1]
  A --> C[Child List 2]
  B --> D[Item A]
  B --> E[Item B]
</mermaid>

== 数学示例（可选） ==  
若需计算列表平均值：  
<math>\bar{x} = \frac{1}{n}\sum_{i=1}^n x_i</math>

== 总结 ==  
Vue.js列表渲染通过<code>v-for</code>指令简化了动态内容的生成，结合响应式系统实现高效更新。理解其工作原理及优化策略对构建高性能应用至关重要。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]