Vue03/Vue指令、v-for的key说明、Vue 就地复用策略

一. 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就不会就地更新