V-for中的key

最新推荐文章于 2023-07-23 15:05:14 发布

渣渣圆

最新推荐文章于 2023-07-23 15:05:14 发布

阅读量373

点赞数

分类专栏： Vue 文章标签： vue

原文链接：https://blog.csdn.net/weixin_43402353/article/details/109793410

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

V-for中的key属性

（一）为什么需要这个key属性？

这个其实和Vue的的虚拟DOM的diff算法有关系

（二）当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的
即把C更新成F，D更新C，E更新成D，最后插入F，很没有效率（数据结构链表）

（三）所以我们需要使用key来给每个节点做一个唯一标识

Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点

四）key的作用主要是为了高效的更新虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
    <hr>
    <hr>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      //splice向数组中插入值，第一个参数是从哪个位置开始，第二个参数是删除几个元素，第三个参数是插入的值
      letters:['A','B','C','D','E']
    }
  })
</script>
</body>
</html>

在这里插入图片描述

渣渣圆

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
V-for中的key

V-for中的key属性（一）为什么需要这个key属性？这个其实和Vue的的虚拟DOM的diff算法有关系（二）当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的即把C更新成F，D更新C，E更新成D，最后插入F，很没有效率（数据结构链表）（三）所以我们需要使用key来给每个节点做一个唯一标识Diff算法就可以正确的识别此节点找到正确的位置区插入新的节点四）key的作用主要是为了高效的更新虚拟D
复制链接

扫一扫