一. Vue指令
v-for
遍历数组语法:?1.v-for="(数组内每一项,数组内每一项索引) in 数组名?"? :key="唯一标识"? 2. v-for=" 自定义每一项? in? 数组名?"??:key="唯一标识"
遍历对象语法: v-for="(对象内值?, 对象内键?)? in? 对象名"? :key="唯一标识"
遍历数字语法: v-for="自定义每一项 in 数字?"?:key="唯一标识"
作用: 循环渲染元素
注意: 1.v-for指令写在那个标签身上 就代表重复生成那个标签?
? ? ? ? ? 2. :key : 有id时写id ，没有就写索引
二.v-for的key说明
1. 设置了key : 按照相同key的新旧元素比较
2.不设置key:? 默认同级兄弟元素按照下标进行比较
3. key值要求: 字符串或者数值 唯一不重复 有id用id 有唯一值用唯一值 实在都没有 才用索引
4.key好处 : 提高虚拟dom的对比复用性能
5.同级父元素中，子元素的key值必须是唯一的，否则vue会报错。（类似于相同作用于变量名不能重复）
注意1: 只要是写到列表渲染 都推荐加上key属性 且key推荐是设置成id 实在不行 就设置成索引
注意2：无key的情况按下标对比
?
三.Vue 就地复用策略
说明:?Vue 在更新列表渲染时, 会尽可能的复用已有的元素, 避免频繁创建新的 DOM 元素
官方文档给的解释：?
? ? ? v-for渲染列表时 如果列表数据发生了变化 Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改 / 复用相同类型元素的算法 也就是说默认情况下vue会尽量使用已经存在的DOM元素 直接在已有的DOM上进行复用修改 这样可以带来性能上的提升
问题:
下图可以看出 删除的是第二个li ， 但是第二个li的索引覆盖到了 第一个li的身上
效果演示：?
解决:?
解决vue不会根据最新的顺序去更新DOM ， 只需要在li身上加 :key="对象名.id" 这样Vue就会根据最新的数据对DOM进行调整 而他会基于key的变化重新排列元素顺序 ， 并且会移除不存在的元素 ,key是给dom节点添加唯一标识 这样vue就不会就地更新