首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在 Vue 中为什么不推荐用 index 做 key

本文首发于政采云前端团队博客:在 Vue 中为什么不推荐用 index 做 key https://zoo.team/article/vue-index 前言 前端开发中,只要涉及到列表渲染,那么无论是...下面我们就以 Vue3.0 diff 算法为切入点,剖析 key 在 diff 算法中的作用 具体 diff 流程如下 Vue3.0 中 在 patchChildren 方法中有这么一段源码 if (...剩下的一个场景是新老节点都还有多个子节点存在的情况。那接下来看看,Vue3 是怎么做的。...其实这就是 diff 移动的思路了 为什么不要用 index 性能消耗 使用 index 做 key,破坏顺序操作的时候, 因为每一个节点都找不到对应的 key,导致部分节点不能复用,所有的新 vnode...key 只是影响页面加载的效率,认为少量的数据影响不大,那下面这种情况,用 index 就可能出现一些意想不到的问题了,还是上面的场景,这时我先再每个文本内容后面加一个 input 输入框,并且手动在输入框内填写一些内容

1.3K20

当我在微调的时候我在微调什么?

但是为什么finetune总能提高BERT在下游任务上的性能表现? BERT在finetune的时候词向量空间究竟发生了什么? BERT输出层应该再接一个什么样的分类器才能取得性能提升?...五、总结 今天这篇文章使用两种探针技术定量分析了不同规模BERT在微调时的变化,带领读者抵近观察了一番BERT的表示空间。回到开头的三个问题,读完文章,似乎都得到了解答。 为什么微调带来性能提升?...-- > 微调增大了不同类别之间的距离,使得划分更好做。 微调时词向量究竟发生了什么变化? -- > 为了使类间距离增加,词向量沿不同方向移动了不同程度。高层变化大于下层。...另外,除了实验结论外,本文实验方法和可视化分析也非常值得学习~ 你好,我是对白,硕士毕业于清华,现大厂算法工程师,拿过八家大厂的SSP级以上offer。 高中荣获全国数学和化学竞赛二等奖。...我每周至少更新三篇原创,分享自己的算法技术、创业心得和人生感悟。

1.7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    我在项目中是这样配置Vue的

    独在公司加夜班,行行代码心甚寒。不知功能何时完,杀了产品来祭天。 在前面的文章中,我为大家带来了许多Vue 实战技巧,也得到了大家的许多好评,但中间还是存在着些许漏洞,在此向大家表示歉意。...其实在前面那些技巧之外,我们还可以做的更多,让我们的开发流程更流畅,开发体验更好,项目性能更上一层楼,怎么做呢,我们一起来看看。...重读vue2.0风格指南,我整理了这些关键规则 获赞 150+ 本文内容来源于小编将开源的一个基于vant封装的开箱即用框架的一部分,本框架内部集成了包括:完整项目目录结构, 移动端适配,vant按需加载...在团队开发中,配置这些还是很有用的,制约团队中的每个人都按照标准来开发功能,这样至少大家写的代码不至于相互看不懂(我深受不规范代码的折磨啊)。...lint-staged是一个在git暂存文件上运行linters的工具,为什么要用这个工具呢,因为我们在提交代码的时候,只需要对已经修改过的文件进行校验,不然检查所有文件,比较浪费时间。

    88930

    在公司做的项目和自己在学校做的有什么区别?

    文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 不知道大家还是学生的时候有没有这个问题:公司做的项目和自己在学校练手的项目有多大的区别...我以前在学校跟着视频做一些项目练手,总感觉公司做的东西会要难很多,不知道跟公司的真实项目区别在哪。 总的来说,我实习的总时间也快半年了,谈谈我觉得公司项目和自己练手的项目有啥区别,欢迎补充。...区别 在视频练的项目大多数都是由讲师在本地编码来讲解整一个项目的开发过程,而我们去到公司做的第一件事是啥?把项目clone(checkout)到本地来看。...在公司做项目,一般都分了好几个环境 线上(现在正在给用户用的) 测试(写完功能,先看一下在测试环境下有没有问题,没问题才发布到线上环境) …等等(可能名字叫起来不一样,但不可能在本地上写完的代码直接就放到线上去跑了...vim console.log吗,我想根据某个关键字来查怎么在vim上操作啊?

    83430

    在公司做的项目和自己在学校做的有什么区别?

    我以前在学校跟着视频做一些项目练手,总感觉公司做的东西会要难很多,不知道跟公司的真实项目区别在哪。 总的来说,我实习的总时间也快半年了,谈谈我觉得公司项目和自己练手的项目有啥区别,欢迎补充。...区别 在视频练的项目大多数都是由讲师在本地编码来讲解整一个项目的开发过程,而我们去到公司做的第一件事是啥?把项目clone(checkout)到本地来看。...在公司做项目,一般都分了好几个环境 线上(现在正在给用户用的) 测试(写完功能,先看一下在测试环境下有没有问题,没问题才发布到线上环境) …等等(可能名字叫起来不一样,但不可能在本地上写完的代码直接就放到线上去跑了...于是大佬们就会写自动登录堡垒机,直接输入IP到线上的脚本 于是乎,我们就登录到堡垒机上,然后再连上线上机器就去查看日志了。查看日志怎么看? 直接cat console.log吗,那得找到什么时候啊?...vim console.log吗,我想根据某个关键字来查怎么在vim上操作啊?

    77820

    在字节,编码前的技术调研我是怎么做的?

    由于某次需求的需要,我进行了一次技术调研,内容是调研前端将 pdf 文件转为图片的解决方案,我接到这个需求的第一时间,立马打开搜索引擎,翻看了十分钟后,很快啊得出了一个口头结论 但这肯定是不行的,十分钟就能整明白的事情就不叫技术调研了...3D 立马就想到 three.js 甚至是 webgl,然后二话不说开始闷头研究起来,结果研究了两天后,在开始做需求的时候,发现需求的重点并不是那个3D地球,而是环绕地球展示的数据点,实际上这是个可视化展示的需求而不是...,如果十分钟就能完全确定的事情就没必要大费周折了 比如,你新启动一个项目,在 vue 和 react 中犹豫,不知道到底用哪个好,如果这个问题放到5年前,你可能确实需要调研一番,但放到当下这个时间点,显然就没必要了...因为那个时候,无论是 react 还是 vue,都不够成熟,特别是 vue 在 2014 年才起步,没有现在那么普及,对于当时的前端圈来说,这两个东西都还算是比较新颖的事务,有经验的人不多,可搜集到的资料也没有那么全...参考 当我们在做技术调研的时候,到底需要做什么?

    60420

    为什么我做分享的时候会感觉大脑空白

    大鱼日更的第 47 篇原创 不知道你有没有遇到这种情况,公司需要你做一个分享交流会,你自我感觉准备的很充分,写了 PPT ,也在脑子里构建了要怎么讲,但是到了真正要讲的会上,你发现自己总语无伦次、磕磕绊绊...再从大脑结构来说,你可以理解它们分布在这个位置: 从距离上说,本能脑和情绪脑距离心脏更近,一旦出现紧急情况,它们就会优先得到供血,这就是为什么我紧张的时候会感觉大脑空白,因为最上方的理智脑供血不足了。...而且因为它年龄小,在遇到危险的时候,本身也竞争不过其他两重脑,所以就能解释,为什么人在遇到危险的时候都靠本能反应而不是靠理智。 02 那怎么解决这个问题呢? 其实很简单,就是打稿子,然后自己多练。...为了验证这个方法,于是我在第二次分享的时候,虽然写了 PPT ,但我还另外写了一份稿子,把会上要分享的内容全部写出来,熟读之后,再对着 PPT 讲上三篇,直到自己觉得不卡顿为止。...昨天我看了阿常和小林的连麦,非常稳,这也是我要继续学习的方向。 好了今天的分享就到这里。 今日鸡汤: 自信人生二百年,会当击水三千里。

    55440

    我在vue3.0团队内部的分享

    记录了我在组内的技术分享, 有同样需求的同学可以参考一下 分享全程下来时间大约1小时 一....这个版本的vue 类似"我的世界", 全部都是一个个方块组成, 不要小看方块, 方块多了甚至可以组成圆形(量变引起质变), 新鲜的玩法才能激发我们的兴趣 三. vue3.0的环境搭建 准备一套搭建好的环境防治到时候出现意外...provideString({ a:'可能我是axios', b:'可能我是一个message弹框' }) } } 在需要使用的组件里面接收 <template...总结 每次看到新技术都会感觉挺好玩的, 一成不变的生活会太无趣了, 在某些方面讲vue失去了一些本来的优势, 但是人家可以兼容vue2.x那就没的说了, 作为分享会的稿子的话时间差不多一个小时, 最好每个点都现场手敲..., 光让大家看已经写好的代码会走神的, 我在学习视频的时候最不喜欢的就是老师说"这个我就不演示了".

    58120

    我在阿里巴巴是如何做高并发设计的!

    那么在阿里巴巴做高并发设计到底需要掌握哪些关键技术呢? 首先,我们要了解分布式系统的原理和应用,因为在高并发场景下,服务器集群往往会扮演着至关重要的角色。...总之,在阿里巴巴做高并发设计需要掌握上述几个关键技术,并且要始终运用大数据分析等先进技术来优化系统性能和提升用户体验。 Part1. 如何优化集群的负载均衡?...加权最少连接算法是在最少连接算法基础上,为每台服务器分配一个权值,根据服务器权值和连接数来计算出分配请求的服务器,可以更好地调配不同容量的服务器。 我用的比较多的优化集群的负载均衡的策略有哪些呢?...1.容错机制 什么是容错机制? 容错机制是指系统在出现故障或错误时,可以自动或半自动地进行错误处理和恢复,保证系统能够持续可用。...2.备份机制 什么是备份机制? 备份机制是指将系统的数据、程序和配置等重要信息备份到其他服务器或存储介质上,以保证系统发生故障时,可以快速恢复系统的原有状态。

    20810

    随机播放歌曲的算法,原来是这么做的,我一直都搞错了

    本篇文章,我将以数组为基础,探索“在线洗牌”的原理。同时,我会以多种方式编写这个原理的代码。...还等什么,继续往下看~ 方法一:Fisher-Yates 算法 Fisher-Yates 算法的基本前提是遍历条目,将数组中的每个元素与从数组中剩余的未洗牌部分随机选择的元素进行交换。...它允许在两个变量或数组元素之间交换值,而不需要临时变量。...下面我们解释一下,在使用 Fisher-Yates 算法对数组进行洗牌的情况下,数组解构赋值是如何工作的: Array [i] 和 Array [j] 表示数组中需要交换的两个元素。...浮点数是可以是正的或负的,并且可以有小数部分的数字,例如 3.14、-0.5、1.0、2.71828 等等。 为什么要从 Math.random() 的结果中减去 0.5 ?

    23420

    在vue中如何使用中央事件总线?vue是做什么的?

    如果将其封装成一个vue的插件,就可以在所有的组件之间任意使用而不需要导入事件总线了,是不是很方便呢?那么在vue中如何使用中央事件总线?一起来看看下文是如何介绍的。...在vue中如何使用中央事件总线?...首先可以在项目中创建一个js文件,这里举例说明为bus.js,然后可引入vue并创建出一个vue实例,导出实例后即可;随后在需要通信的两个组件之中分别引入bus.js;通过vue实例方法就可以发送事件名称和需要传递的数据...完成之后就可以实现最简单的实际应用问题。需要注意的是,事件总线需要手动清除,否则就会一直存在,原本只需要执行一次获取的操作会存在多次操作,这个问题对于项目开发来说是比较严重的。 vue是做什么的?...上文中为大家介绍了在vue中如何使用中央事件总线的相关问题,希望能够给各位前端及开发人士提供参考。

    2.8K20

    我曾经在极端愤怒的情况下做不出简单题!

    大家好,我是吴师兄。 众所周知,LeetCode 上面的算法题分为三个级别,简单、中等、困难,但有时候明明标注的是简单题,但困难程度却不亚于中等题、甚至是困难题。 比如剑指 Offer 29....对于一个二维矩阵来说,它包含了如下的边界与打印顺序: 1、顶层,我们可以定义为 top,在顶层是按照从左到右的顺序进行打印 2、右列,我们可以定义为 right,在右列是按照从上到小的顺序进行打印 3、...底层,我们可以定义为 bottom,在顶层是按照从右到左的顺序进行打印 2、左列,我们可以定义为 left,在左列是按照从下到上的顺序进行打印 在打印的过程中,矩阵的可打印区间在不断的发生变化: 每当把从左到右把一行打印完毕之后...// top 表示顶部所在的层数位置,一开始在第 0 层 int top = 0 ; // bottom 表示底部所在的层数位置,一开始在第 matrix.length...- 1 层 int bottom = matrix.length - 1 ; // left 表示左部所在的列数位置,一开始在第 0 列 int left

    59220

    没写文章的这几天,我在搞什么飞机

    这几周周末大部分时间都和朋友们在一块,聊天、聚餐和摆摊,当整个人的状态回归于生活的时候发现,原来可以这么美好。 当然,也并不是都在玩,最近为了给自己储备一些技能,利用闲暇时间学了点小程序开发。...仔细思考下,感觉确实不需要,Android 开发本身也是在写界面,思路都是相通的,很多概念都是一通百通的,但为啥学了这么久,还是没能产出自己的作品呢?...说来话长,在看完官方文档,理解了一些基本概念后,就开始了模仿一些小程序页面来写,起初确实能写出来,可作为一个有想法的我,总觉得模仿的对象还可以做的更好一点,所以,就开始从模仿到改造,放入些自己的元素,比如配色...、排版、功能等等,可这些想法,都是在一边写功能一边调试,总觉得这个配色不行,这个排版不好看,然后一直在调试的阶段中浪费大量时间。...我相信,一些刚做独立开发者的一定深有体会。

    23330

    为什么我在公司里访问不了家里的电脑?

    上篇文章「为什么我们家里的IP都是192.168开头的?」提到,因为IPv4地址有限,最大42亿个。...IP报头里含有发送和接收IP地址 但是我们家里的局域网内,基本上都用192.168.xx.xx这样的私有IP。 如果我们在发送网络包的时候,这么填。对方在回数据包的时候该怎么回?...局域网内用的是私有IP,公网用的都是公有IP。一个局域网里的私有IP想访问局域网外的公有IP,必然要做个IP转换,这是在哪里做的转换呢?...那这么说只有用到端口的网络协议才能被NAT识别出来并转发? 但这怎么解释ping命令?ping基于ICMP协议,而ICMP协议报文里并不带端口信息。我依然可以正常的ping通公网机器并收到回包。...为什么我在公司里访问不了家里的电脑? 那是因为家里的电脑在局域网内,局域网和广域网之间有个NAT路由器。由于NAT路由器的存在,外网服务无法主动连通局域网内的电脑。

    2.1K10

    我在项目中用实际用到的22个Vue优化技巧

    此外使用 index 作为 key 我还应该要尽量避免对数组的中间进行 增加/删除 等会影响后面元素key变化的操作。这会让 vue 认为后面所有元素都发生了变化,导致多余的对比和原地复用。...v-for,所以当 v-for 和 v-if 一起使用时效果类似于 Vue2 中把 v-if 上提的效果 例如下面这段代码在 Vue2 中是不被推荐的, Vue 也会给出对应的警告...$once 来做到这样的效果,当然你也可以在 optionsAPI beforeDestroy 中销毁事件,但是我更加推荐前者的写法,因为后者会让相同功能的代码更分散 function scrollFun...,只是我在项目并不是太常用 冻结对象(避免不需要响应式的数据变成响应式) 长列表渲染-分批渲染 长列表渲染-动态渲染( vue-virtual-scroller) ......首屏/体积优化 我在项目中关于首屏优化主要有以下几个优化方向 体积 代码分割 网络 体积优化 压缩打包代码: webpack 和 vite 的生产环境打包默认就会压缩你的代码,这个一般不需要特殊处理

    80120

    这篇神奇的文章里小鼠既当实验组又当对照组!小鼠:我做错了什么?

    这是一篇做LncRNA的文章,题目是“STAT5A induced LINC01198 promotes proliferation of glioma cells through stabilizing...研究人员的实验结果表明,与正常对照组相比,LINC01198在肿瘤组织中明显富集,LINC01198的升高与不良的总体预后显著相关。此外,激活转录因子STAT5A,可以诱导LINC01198的表达。...所以作者认为STAT5诱导的LINC01198通过稳定DGCR8在胶质瘤细胞中促进胶质瘤细胞的增殖和迁移。 貌似是一篇比较中规中矩的LincRNA研究套路文章。...但是,当我们看本文Fig部分时发现了很多有意思的图片,第一个发现的是这个小鼠肿瘤的图片,找找看,这些图片有哪些问题 ? ? 有没有什么发现?...通过Photoshop比对D图和E图发现,除了c2部分的数值不重合以外,其他的部分也是基本完全重合! ?

    55820

    为什么我做的网页总是卡?前端性能优化规则要点

    ❝为了方便记忆和阅读,文章使用部分简写名词,解释如下 ❞ 「D端」:桌面端页面Desktop End Page 「M端」:移动端页面Mobile End Page 概述指南 D端优化手段在M端同样适用...「首屏加载」:首屏快速显示可大大提升用户对页面速度的感知,应尽量针对首屏的快速显示做优化 「按需加载」:将不影响首屏的资源和当前屏幕不用的资源放到用户需要时才加载,可大大提升显示速度和降低总体流量(「...,然后使用工具压缩,同时在代码中用srcset来按需显示(「过度压缩图像大小影响图像显示效果」) 使用TinyJpg和TinyPng压缩图像 使用CSS3、SVG、IconFont代替图像 使用img...Canvas动画,iOS8+可使用WebGL动画 「优化高频事件」:scroll、touchmove等事件可导致多次渲染 函数节流 函数防抖 使用requestAnimationFrame监听帧变化:使得在正确的时间进行渲染...CSS属性:opacity、transform、transition ❝「样式优化」 ❞ 「避免在HTML中书写style」 「避免CSS表达式」:CSS表达式的执行需跳出CSS树的渲染 「移除CSS

    1.8K20
    领券