循环渲染

遍历数组

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. 减少渲染次数，提升渲染性能