7.1.2 数组语法-Vue.js从入门到精通(二)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(二)

### 7.1.2 数组语法

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

#### 7.1.2.1 列表渲染

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

```html
<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则不能检测到变化：

```javascript
// 变异方法，可以触发视图更新
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`来确保视图能响应变化：

```javascript
// 使用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会缓存计算属性的结果，并在其依赖的响应式属性发生变化时重新计算。

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

```javascript
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）经常与数组操作结合使用，以实现更复杂的逻辑。例如，你可能有一个方法用于向数组添加新项，或者根据用户输入过滤数组。

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

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

```html
<button @click="addItem('New Item')">Add Item</button>
<button @click="removeItem(index)">Remove Item</button>

```

#### 7.1.2.5 注意事项

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

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

该分类下的相关小册推荐：

VUE组件基础与实战

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(四)

Vue原理与源码解析

Vue面试指南

TypeScript和Vue从入门到精通(五)

TypeScript和Vue从入门到精通(一)

移动端开发指南

TypeScript和Vue从入门到精通(二)

Vue源码完全解析

vue项目构建基础入门与实战

Vue3技术解密