首页 > 其他分享 >关于 Vue 列表渲染 key 绑定 index 的性能问题

关于 Vue 列表渲染 key 绑定 index 的性能问题

时间:2023-03-21 14:45:13浏览次数:51  
标签:index Vue 绑定 列表 文档 key

今天在学习 React 文档,列表渲染一节中提及到一个关于 key 绑定索引值(index)性能的问题:

React 官方文档原文:“如果列表项目的顺序可能会变化,我们不建议使用索引来用作 key 值,因为这样做会导致性能变差,还可能引起组件状态的问题”。

查阅网上的博客,确实有对 Vue 列表渲染 key 绑定索引值问题的探讨。Vue 官方文档有说,但没有 React 文档说得大白话,所以有的人没有注意到这个点,Vue 官方文档原文:“提供一个唯一的 key attribute”。

通过两个案例,可以直观的感受到绑定 index 和绑定唯一标识符的区别。

1️⃣ 绑定 index 的动态列表:

每一个 li 都闪烁了,代表所有节点都重新渲染了

2️⃣ 绑定唯一值,number、string 等基础类型的值,且不是 index 这种会因数组变化而重新排序的数字:

删除一个 li,其余的 li 没有闪烁

标签:index,Vue,绑定,列表,文档,key
From: https://www.cnblogs.com/Himmelbleu/p/17239948.html

相关文章

  • vue-element-admin e-icon-picker的input一直不出来
    今天项目中有用到e-icon-picker,然后正常引入如下:安装依赖全局引入css   全局注册   组件用法   按照以上步骤都加载了,但是页面中一直都没有出现......
  • VsCode 常用好用插件/配置+开发Vue 必装的插件
    一、VsCode常用好用插件1、实时刷新网页的插件:LiveServer2、自动保存:不用装插件,在VsCode中设置一下就行3、openinbrowser支持快捷键与鼠标右键快速在浏览器中打......
  • 使用vue实现一个点击复制的功能
    <scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><divid="app"><button@click="copyText">复制</button><inputtype="text"v-model="textToCopy"/>......
  • 前端vue获取后端返回的富文本内容不是标签是转义字符解决方法
    新手的我就直接上代码template部分(UI框架用的vant)<template><divclass="common-bg"><van-nav-bartitle="消息中心"left-arrow:fixed="true":placeholder......
  • Treemap按key和value降序排序
    Treemap是一种根据键排序的数据结构,可以通过重载它的比较器来按照值排序。要按键排序,可以使用默认的比较器,而要按值排序,可以创建一个自定义的比较器并将其传递给treemap的......
  • Vue 评分星星显示
    <el-table-columnlabel="专业性"align="center"prop="specialty"><templateslot-scope="{row}"><el-ratev-model="row.specialty"disabledshow-score......
  • vue-router原理剖析
    vue-router原理单页面核心之一是:1、更新视图而不重新请求页面。2、vue-router在实现单页面前端路由时,提供了:hash,historyhash:兼容所有浏览器,hash的值为#/*内容,has......
  • vue3+ts初学之安装路由(router)
    一、安装路由    1.安装vue-router        vue3需要安装4.0以上版本        vue2最好安装4.0以下版本    安装命令:npminstallvue-......
  • vue3+ts初学之创建一个vue3项目
    (1)使用vue-cli创建:##安装或者升级npminstall-g@vue/cli##保证vuecli版本在4.5.0以上vue--version##创建项目vuecreatemy-project然后的步骤:Pl......
  • Vue+Element UI 弹出文本框
    效果: 代码:/*打开审批弹窗*/openAudit(row){this.$confirm('请确认审核结果','审核',{distinguishCancelAndClose:true,confirm......