子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

列表渲染 ​

列表渲染

Vue3 提供了一种更简洁、更高效的方式来实现列表渲染。在 Vue3 中，我们可以使用 v-for 指令来遍历数组或对象，并根据每个元素生成相应的 DOM 元素

列表渲染（v-for）的使用 ​

在 Vue 3 中，你可以使用 <script setup> 语法来实现列表渲染。下面通过代码案例详细解释如何使用 <script setup> 实现列表渲染，并提出注意事项。

示例 ​

vue
<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Orange" },
]);

// 注意事项：在 <script setup> 内部定义的变量和函数，需要在模板中使用才会生效
</script>

在上述示例中，我们使用了 <script setup> 将相关的变量和逻辑封装到一个块中。在块内部，我们使用 ref 函数创建了一个名为 items 的数组变量，其中包含了三个对象。然后，我们使用 v-for 指令将数组中的每个对象渲染为一个 <li> 元素，并使用 :key 属性为每个元素提供唯一的标识。

注意事项 ​

  1. 在 <script setup> 内部定义的变量和函数必须在模板中使用才会生效，否则它们会被自动清除掉。
  2. 通过 <script setup> 方式定义的变量和函数是局部变量，不会被暴露到模板之外的作用域中。
  3. 当使用 <script setup> 时，不能直接在模板中访问全局变量或组件实例，需要通过 context.attrs 或 context.slots 来访问。

v-for 与 v-if 配合时的注意事项 ​

当 v-for 和 v-if 同时存在于一个节点上时，v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。

为了解决这个问题，你可以在外部再包装一层 ​<template>​，然后在该 ​<template>​ 上使用 v-for，在内部的元素上使用 v-if 条件。这样可以确保 v-if 条件能够访问到 v-for 的作用域，并且代码也更加明显易读。

html
<template>
  <template v-for="item in items">
    <li v-if="!item.visible">{{ item.name }}</li>
  </template>
</template>

<script setup>
  import { ref } from "vue";

  const items = ref([
    { id: 1, name: "Apple", visible: true },
    { id: 2, name: "Banana", visible: false },
    { id: 3, name: "Orange", visible: true },
  ]);

  // 注意事项：在 <script setup> 内部定义的变量和函数，需要在模板中使用才会生效
</script>

在上述示例中，虽然数组 items 中的第二个元素的 visible 属性为 false，但由于 v-for 的优先级更高，所以该元素仍然会被渲染到列表中。如果想要根据条件来过滤列表，请将 v-for 和 v-if 放在不同的元素上。

v-for 中的 key 的原理 ​

为了高效地更新和重用列表中的元素，Vue 要求为每个列表项提供一个唯一的 key 属性。通过 key，Vue 可以追踪列表中元素的身份，并在改变列表时，尽可能地复用已有的 DOM 元素。

响应式数组的变更方法 ​

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

示例 ​

html
<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="addItem">Add Item</button>
</template>

<script setup>
  import { ref } from "vue";

  const items = ref([
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 3, name: "Orange" },
  ]);

  function addItem() {
    items.value.push({ id: items.value.length + 1, name: "New Item" });
  }

  // 注意事项：在 <script setup> 内部定义的变量和函数，需要在模板中使用才会生效
</script>

在上述示例中，通过 addItem 方法向 items 数组中添加新的对象。由于 Vue 3 可以侦听到 push 方法的变更，这样做将自动触发界面的重新渲染，显示新的列表项。