循环渲染

遍历数组

Arr: [
  { id: "a", title: "A" },
  { id: "b", title: "B" },
];

<template>
  <ul>
    <li v-for="(item, index) of Arr" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

响应式改变

• 只能通过以下数组方法：push 、pop 、shift 、unshift 、splice 、sort 、reverse

• 指向新的引用地址

• $set 方法

  • /**
    	params1: 变量
    	params2：第几项
    	params3：改变成什么
    */
    $set(Arr, 1, { id: "b", title: "C" });

通过下标实现改变 不 能响应式变化

遍历对象

Obj: {
    a: {title: 'A'},
    b: {title: 'B'}
}

<template>
  <ul>
    <li v-for="(val, key, index) in Obj" :key="key">
      {{ key }} —— {{ val.title }}
    </li>
  </ul>
</template>

响应式改变

• 指向新的引用地址

• $set 方法

  • /**
    	params1: 变量
    	params2：键
    	params3：改变成什么
    */
    $set(Obj, "b", { title: "C" });

通过.新增 不 能响应式变化

为何 v-for 中用 key

1. diff算法中通过tag和key来判断是否为同一个节点
2. 减少渲染次数，提升渲染性能