Vue中的 key 的作用是什么?

这个问题,其实也是经常问的,对于刚刚毕业的大学生来说,

面试官问:vue中循环遍历数组的时候,为什么要加 key/key的作用是什么?

看一下官网的回答

  • key属性主要在 vue 的虚拟 DOM算法,在 新旧 nodes 对比时 辨识 VNodes
  • 如果不使用 key,vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地 修改/复用 相同类型元素的算法
  • 而使用 key 它会基于 key 的变化 重新排列元素顺序,并且会 移除/销毁 key 不存在的元素

VNode 的全称 是 Virtua Node ,也就是虚拟节点
事实上,无论是组件还是元素,他们最终在 Vue 中表示出来的都是一个个 VNode
VNode 的本质就是一个 JavaScript 的对象

VNode 最大的好处 就是跨平台

在这里插入图片描述

diff 算法,就是 新的 vnodes 和 旧的 vnode 做一个对比,看看哪里发生了变化 ,再去更改,那个变化的东西

1、如果 key 使用 index(索引)等于 没有定义 key

key 最好是一个唯一的值,项目开发中,一般都是用 id,如果你用 index 其实和没加没啥区别,就是 不让他警告了而已

  1. 先进行比较 (假设,新:[a,b,f,c,d,],旧:[a,b,c,d])
  2. 从 第一个元素 开始比较,如果 相等 则不做任何更新
  3. 若不一样 , (索引是2的时候,旧的是 c ,新的是f,内容不一样,则更新它的内容)
  4. d 和 c 也要更新,
  5. 然后 新的 还多出来 一个 d ,则创建一个 d ,在挂载到 里面,然后渲染即可
    在这里插入图片描述

2、如果设置了 key

  1. 从头开始遍历、比较 a、b 是一致的,然后是 c 和 f 不一致 ,就会跳出循环
    在这里插入图片描述
  2. 从尾部 开始进行遍历、比较
    在这里插入图片描述
  3. 如果是 旧节点遍历完毕,还有新的节点,那么就新增节点
    在这里插入图片描述
  4. 如果是 新的节点遍历完毕,但是还有 旧的节点,那么就移除旧的节点
    在这里插入图片描述
  5. 如果中间还有很多未知或者乱序的节点
    在这里插入图片描述

3、总结

可以这样回答

  1. 首先是 提高 虚拟DOM 的渲染效率
  2. 第二点,可以分析一下,有 key 和 没有 key 的 渲染过程
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值