文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何理解VUE v-for中的key

2023-06-21 20:18

关注

今天就跟大家聊聊有关如何理解VUE v-for中的key,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

不在v-for的标签中加入key时。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="../../js/vue.js"></script>  <title>关于v-for的key</title></head><body>  <div id="app">    <div>      <input type="text" v-model="name">      <button @click="add">添加</button>    </div>    <ul>      <li v-for="(item, index) in list">        <input type="checkbox"> {{item.name}}      </li>    </ul>  </div>  <script type="text/javascript">    const app = new Vue({      el: '#app',      data() {        return {          name: '',          newId: 3,          list: [            { id: 1, name: '张三' },            { id: 2, name: '李四' },            { id: 3, name: '王五' }          ],        };      },      computed: {      },      methods: {        add() {          //注意这里是unshift          this.list.unshift({ id: ++this.newId, name: this.name })          this.name = ''        }      },    });  </script>  <style scoped>  </style></body></html>

在我们选中李四并添加赵六后,被选中的人变成了张三。

如何理解VUE v-for中的key

如何理解VUE v-for中的key

再来看v-for有key的情况:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="../../js/vue.js"></script>  <title>关于v-for的key</title></head><body>  <div id="app">    <div>      <input type="text" v-model="name">      <button @click="add">添加</button>    </div>    <ul>      <li v-for="(item, index) in list" :key="item.id">        <input type="checkbox"> {{item.name}}      </li>    </ul>  </div>  <script type="text/javascript">    const app = new Vue({      el: '#app',      data() {        return {          name: '',          newId: 3,          list: [            { id: 1, name: '张三' },            { id: 2, name: '李四' },            { id: 3, name: '王五' }          ],        };      },      computed: {      },      methods: {        add() {          //注意这里是unshift          this.list.unshift({ id: ++this.newId, name: this.name })          this.name = ''        }      },    });  </script>  <style scoped>  </style></body></html>

如何理解VUE v-for中的key

如何理解VUE v-for中的key

在我们选中李四并添加赵六后,被选中的人还是 李四,没有变化。

这是因为vue底层的Diff算法导致的。diff算法的处理方法是对操作前后的dom树同一层的节点进行对比,一层一层对比,如下图:

如何理解VUE v-for中的key

当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则。

比如一下这个情况:

如何理解VUE v-for中的key

我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:

如何理解VUE v-for中的key

即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?

所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

如何理解VUE v-for中的key

vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id index等,因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。

看完上述内容,你们对如何理解VUE v-for中的key有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网行业资讯频道,感谢大家的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯