重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天小编给大家分享一下vue不能用index做为唯一标识的原因是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
为蚌埠等地区用户提供了全套网页设计制作服务,及蚌埠网站建设行业解决方案。主营业务为成都做网站、网站制作、蚌埠网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
先来看看原生操作dom节点的方式,但是浏览器响应DOM操作是非常耗能的,因为节点的改变会导致浏览器进行重排重绘操作(可参考浏览器渲染页面的过程)
Document
再加上许多js代码动态的改变元素使浏览器发生重排,耗能可想而知,假如部分节点点改变,那些改变的节点进行局部重排不是能节省很多性能吗???vue引入的虚拟dom就是用这一方式,下面是一段vue代码
Document
当点击change按钮后
如果原生js进行这样的操作,势必会进行重排,但是页面只是局部改变,但vue引入虚拟dom之后大大节省了耗能
在vue中,执行渲染函数前就可以得到一个虚拟节点树,使用虚拟节点树就可以渲染页面。当页面dom节点动态改变时,在渲染之前,会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比,只渲染不同的部分,各个虚拟节点就是一个对象,描述了一层容器的特征,下面是vue代码中点击前change按钮前的虚拟节点树
vndoe = { tag: 'ul', children: [ { tag: 'li',key:0, children: [{ vnode: { text: '3' } }] }, { tag: 'li',key:1, children: [{ vnode: { text: '2' } }] }, { tag: 'li',key:2, children: [{ vnode: { text: '1' } }] } ] }复制代码
当点击change之后会生成新的虚拟节点树和它对比
对比过后,仅仅渲染不同的地方
那怎样去找到2个虚拟节点数的不同之处呢?这就涉及到了vue源码的diff算法
当生命周期挂载完毕后,只要数据源变化,就一定会触发watcher观察者的回调 去驱动视图更新
vm._update(v_rander())
_update会生成vnode去_patch_查找不同
_patch_中启动的就是diff算法
key就是唯一标识 为了让diff算法更准确找到需要对比的两个节点
我们还是用先前的代码来看,在diff算法中,key就是唯一标识,当2个虚拟节点树进行对比时,会找到相同的key值进行对比,发现key值相同但里面的数据不同,diff算法就会认定它改变了将它重新渲染,而事实上,他们只是位置变了,当我们给它加上唯一标识id时
Document 复制代码
当diff算法找到相同的key值进行对比,发现key值相同但里面的数据也是相同的,就不会重新渲染,而是将它们换位置,大大节省了浏览器消耗,所以用index作为key会导致diff中的优化失效(降低了复用性,违背了虚拟Dom的初衷)
Document 复制代码
点击删除按钮后
我们发现它居然删除了最后一项,因为在删除数据过后,由于数组的特性剩下数据的下标index和key都会变被-1,也就是第二,三条数据key由1,2变成0,1,diff算法会认为key为0,1是数据内容改变,而key为3的内容被删了,就重新渲染第一,二条数据删除第3条数据,但实际上我们是删了第一个内容,第二,三个是key值发生了变化。vue不会深入的去对比子组件的文本内容,只能感知到外面一层的对象发生了改变,拿key去对比,如果key不唯一,就会错误的操作虚拟dom树,错误渲染
以上就是“vue不能用index做为唯一标识的原因是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。