7.1.2 数组语法

在Vue.js中，数组是处理列表数据和动态内容的重要数据结构。Vue提供了丰富的数组语法，使得开发者能够高效地在模板中操作数组，包括渲染列表、监听数组变化以及执行复杂的数组操作等。本章节将深入探讨Vue中数组语法的各个方面，包括列表渲染、数组更新检测、方法调用及注意事项。

7.1.2.1 列表渲染

Vue通过v-for指令提供了强大的列表渲染能力。使用v-for，你可以基于一个数组来渲染一个列表。基本的v-for语法如下：

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.text }}
  </li>
</ul>

在上面的例子中，items是一个数组，v-for遍历这个数组，为每一项生成一个<li>元素。item是数组当前项的值，而index是当前项的索引（从0开始）。:key是一个特殊的绑定属性，用于给每个节点一个唯一的标识，帮助Vue跟踪每个节点的身份，从而重用和重新排序现有元素。

注意：key的使用是非常重要的，特别是在列表可能发生变化时（如添加、删除或排序）。一个好的key应该是每项数据的唯一标识。

7.1.2.2 数组更新检测

Vue能够检测到数组中的变化，并触发视图更新。但是，Vue修改数组的某些方法（如push、pop、shift、unshift、splice、sort、reverse）能直接触发视图更新，因为它们被Vue进行了方法拦截或封装。如果你使用非变异方法（如直接设置数组的索引值或修改数组长度），Vue则不能检测到变化：

// 变异方法，可以触发视图更新
this.items.push({ text: 'New item' });
// 非变异方法，不会触发视图更新
this.items[this.items.length] = { text: 'New item' }; // 这种方式不会触发视图更新
this.items.length = newLength; // 同样不会触发视图更新

为了在使用非变异方法后也能触发视图更新，Vue提供了Vue.set（在Vue 3中通过this.$set或全局的app.config.globalProperties.$set）方法，以及使用Array.prototype.splice来确保视图能响应变化：

// 使用Vue.set（Vue 2）
this.$set(this.items, this.items.length, { text: 'New item' });
// 使用splice（Vue 2 & Vue 3）
this.items.splice(this.items.length, 0, { text: 'New item' });

7.1.2.3 数组过滤与排序

虽然Vue本身不直接提供数组过滤和排序的指令，但你可以通过计算属性（computed properties）来实现这一功能。计算属性允许你声明式地描述一些数据依赖，Vue会缓存计算属性的结果，并在其依赖的响应式属性发生变化时重新计算。

<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.text }}
  </li>
</ul>

computed: {
  filteredItems() {
    return this.items.filter(item => item.text.includes('searchKeyword'));
  },
  sortedItems() {
    return this.items.sort((a, b) => a.text.localeCompare(b.text));
  }
}

在上述例子中，filteredItems是一个计算属性，它根据某个搜索关键词过滤items数组。类似地，sortedItems计算属性则对数组进行排序。你可以根据需要在模板中使用这些计算属性。

7.1.2.4 数组与方法的结合

Vue中的方法（methods）经常与数组操作结合使用，以实现更复杂的逻辑。例如，你可能有一个方法用于向数组添加新项，或者根据用户输入过滤数组。

methods: {
  addItem(text) {
    this.items.push({ text: text });
  },
  removeItem(index) {
    this.items.splice(index, 1);
  },
  filterByText(keyword) {
    // 这里可以返回一个新的过滤后的数组，或者更新一个计算属性
    // 例如，更新一个data属性来存储过滤结果
  }
}

在模板中，你可以通过事件监听器（如@click）调用这些方法：

<button @click="addItem('New Item')">Add Item</button>
<button @click="removeItem(index)">Remove Item</button>
<!-- 假设index是已知的，或者通过某种方式传递 -->

7.1.2.5 注意事项

• 避免直接修改数组索引：如前所述，直接通过索引设置数组项的值或修改数组长度不会触发Vue的响应式更新。使用Vue.set或splice来确保响应性。
• 使用key属性：在v-for中使用:key属性，帮助Vue追踪节点的身份，优化DOM更新。
• 计算属性优于方法：对于需要基于响应式数据计算得到的新数据，优先考虑使用计算属性而非方法。计算属性有缓存机制，性能更优。
• 监听数组变化：虽然Vue能自动检测数组的变异方法，但如果你需要监听数组的所有变化（包括非变异操作），可能需要考虑使用Vue的watch属性或计算属性。

通过掌握Vue中数组语法的这些方面，你将能够更加灵活和高效地处理列表数据和动态内容，提升你的Vue应用开发能力。