集帅(美)们，别再写 :key = "index" 啦！(稀土掘金技术社区2024年11月10日文章)

分享到：

作者：稀土掘金技术社区 | 更新时间：2024-11-12 03:50:12

点击关注公众号，“技术干货”及时达！浅聊一下灵魂拷问：你有没有在v-for里使用过:key = "index"，如果有，我希望你马上改正过来并且给我点个赞，如果没有，来都来了，顺手给我点个赞...❝假如您也和我一样，在准备春招。欢迎加我微信...

A股板块轮动加剧，跨年大妖来袭，这几只票主力已明显介入！微信搜索关注【研讯小组】公众号（可长按复制），回复666，领取代码！

点击关注公众号，“技术干货”及时达！

浅聊一下

灵魂拷问：你有没有在v-for里使用过:key = "index"，如果有，我希望你马上改正过来并且给我点个赞，如果没有，来都来了，顺手给我点个赞...

❝
假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！
❞

开始

在向掘友们解释为什么不能使用 :key = "index"之前，我想我还得向你们铺垫一点东西

虚拟DOM

什么是虚拟DOM呢？虚拟DOM是一个对象，没想到吧...我们来看看Vue是如何将template模板里面的东西交给浏览器来渲染的

首先通过 compiler 将 template模板变成一个虚拟DOM，再将虚拟DOM转换成HTML，最后再交给浏览器V8引擎渲染，那么虚拟DOM是什么样的呢？

html> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Documenttitle> <scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js">script> head> <body> <divid="app"> <ulid="item"> <liv-for="iteminlist"class="item">{{item}}li> ul> div> <script> const{createApp,ref}=Vue createApp({ setup(){ constlist=ref(['vue','js','html']) return{ list } } }).mount('#app') script> body> html>

在这里，template模板实际上是

<ul> <liv-for="iteminlist">{{item}}li> ul>

通过v-for循环，渲染出来了3个li

<ul> <li>vue<li> <li>js<li> <li>html<li> ul>

我们的compiler会将这个模板转化成虚拟DOM

letoldDom={ tagName='ul', props:{ //存放id和class等 id:'item' }, children[ { tagName='li', props:{ class:'item' }, children:['vue'] }, { tagName='li', props:{ class:'item' }, children:['js'] }, { tagName='li', props:{ class:'item' }, children:['html'] }, ] }

diff算法

给前面的例子来点刺激的，加上一个按钮和反转函数，点击按钮，list反转

html> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Documenttitle> <scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js">script> head> <body> <divid="app"> <ul> <liv-for="iteminlist">{{item}}li> ul> <button@click="change">changebutton> div> <script> const{createApp,ref}=Vue createApp({ setup(){ constlist=ref(['唱','跳','rap','篮球']) constchange=()=>{ list.value.reverse() } constadd=()=>{ list.value.unshift('6') } return{ list, change, } } }).mount('#app') script> body> html>