vue的key怎么使用
本篇內(nèi)容主要講解“vue的key怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue的key怎么使用”吧!
成都創(chuàng)新互聯(lián)公司是專業(yè)的西秀網(wǎng)站建設(shè)公司，西秀接單;提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行西秀網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
在vue中，key是DOM對象的標(biāo)識，是給每一個(gè)vnode的唯一id，也是diff的一種優(yōu)化策略；可以根據(jù)key，更準(zhǔn)確、 更快的找到對應(yīng)的vnode節(jié)點(diǎn)。如果數(shù)據(jù)只做展示使用，可以使用index作為key；如果使用index作為key，而后續(xù)操作會破壞順序，一定會帶來效率問題，嚴(yán)重時(shí)會渲染出錯(cuò)誤的DOM。
1. key是什么
key在Vue是DOM對象的標(biāo)識；key是給每一個(gè)vnode的唯一id，也是diff的一種優(yōu)化策略，可以根據(jù)key，更準(zhǔn)確， 更快的找到對應(yīng)的vnode節(jié)點(diǎn)。
進(jìn)行列表展示時(shí)，默認(rèn)key是index。
如果數(shù)據(jù)只做展示使用，使用index作為key是沒有任何問題的。
如果使用index作為key，而后續(xù)操作會破壞順序，一定會帶來效率問題，嚴(yán)重時(shí)會渲染出錯(cuò)誤的DOM。
2. key的作用
key就是一個(gè)標(biāo)識，被使用在Vue中。再詳細(xì)一點(diǎn)，key被使用在Vue中的虛擬DOM中，并不會出現(xiàn)在真實(shí)DOM中。
2.1 舉一個(gè)例子
以列表的形式展示一組人員信息。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>key的原理</title> <!--引入vue--> <script type="text/javascript" src="../js/vue.js"></script> </head><div id="root"> <h3>人員列表</h3> <ul> <li v-for="(p,index) in persons"> {{p.name}}-{{p.age}} </li> </ul></div><body> <script type="text/javascript"> const vm = new Vue({ el:'#root', data:{ persons:[ {'id':'001', 'name':'張三','age':'18'}, {'id':'002', 'name':'李四','age':'19'}, {'id':'003', 'name':'王五','age':'20'} ] } }) </script></body></html>這個(gè)html文件在瀏覽器中打開如下圖所示。
而上述示例html文件中并沒有使用到key，似乎也沒有問題。當(dāng)然，單純地展示數(shù)據(jù)，不寫key是不會存在問題的。
現(xiàn)在我們?yōu)樯鲜鍪纠由蟢ey，這里以每條數(shù)據(jù)的id為key
<li v-for="(p,index) in persons" :key="p.id"> {{p.name}}-{{p.age}}</li>加上key的展示結(jié)果和上圖結(jié)果一模一樣。
.jpg)
而如果我們在瀏覽器上查看元素，不會看到key的存在。
截至目前，我們可以得到兩個(gè)結(jié)論：1. 只做數(shù)據(jù)展示用，不寫key是沒有任何影響的；2.key不會出現(xiàn)在真實(shí)DOM中
實(shí)際上，即使不寫key，Vue在生成真實(shí)DOM時(shí)，也用到了key，默認(rèn)是數(shù)據(jù)索引（index）
我們把key替換為index，展示的數(shù)據(jù)不會產(chǎn)生任何改變。
<li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}}</li>2.2 修改一下上述示例
在展示人員信息的基礎(chǔ)上顯示索引，并且添加一個(gè)按鈕，功能是在頭部添加人員信息
對上述html文件稍加修改。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>key的原理</title> <!--引入vue--> <script type="text/javascript" src="../js/vue.js"></script> <link rel="icon" href="../favicon.ico" type="image/x-icon" /></head><div id="root"> <h3>人員列表</h3> <button @click="add">添加一個(gè)老劉</button> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}}-{{index}} </li> </ul></div><body> <script type="text/javascript"> const vm = new Vue({ el:'#root', data:{ persons:[ {'id':'001', 'name':'張三','age':'18'}, {'id':'002', 'name':'李四','age':'19'}, {'id':'003', 'name':'王五','age':'20'} ] }, methods:{ add(){ const p = {'id':'004', 'name':'老劉','age':'40'} this.persons.unshift(p) } } }) </script></body></html>我們可以看到，張三、李四、王五的索引分為別0，1，2
點(diǎn)擊按鈕，添加一個(gè)新人物，這個(gè)時(shí)候索引發(fā)生了變化，新添加的人物“老劉”變?yōu)榱怂饕?，似乎對，也似乎不對
當(dāng)然，單純地討論索引，這里一點(diǎn)問題也沒有，下面舉一個(gè)新例子，來說說“不對“在哪里
2.3 再修改一下示例
不展示索引了，改為輸入框，在每個(gè)人物后面的輸入框內(nèi)寫上人物的姓，觀察新插入數(shù)據(jù)后原始數(shù)據(jù)的變化
稍微修改一下html
<li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}} <input type="text"></li>實(shí)際效果就是下圖這樣
到這里，似乎沒有什么不對，接下來就是見證奇跡的時(shí)刻
添加老劉，出現(xiàn)了問題，和我們預(yù)想的不一樣。
這是key為index的情況，如果修改為數(shù)據(jù)的唯一標(biāo)識，則不會產(chǎn)生這樣的問題。
<li v-for="(p,index) in persons" :key="p.id"> {{p.name}}-{{p.age}} <input type="text"></li>誒，這就是我們想要的。
列表內(nèi)有輸入內(nèi)容，后續(xù)操作破壞了原始順序，如果以index作為key，就會產(chǎn)生錯(cuò)誤DOM
3. key的實(shí)現(xiàn)原理
要解釋key的實(shí)現(xiàn)原理，就要引入Vue一個(gè)十分重要的概念——【虛擬DOM】。
給出一組數(shù)據(jù)，Vue要把這些數(shù)據(jù)渲染到頁面上，首先要生成【虛擬DOM】，然后根據(jù)【虛擬DOM】去生成【真實(shí)的DOM】。如果數(shù)據(jù)發(fā)生了改變，Vue會生成【新的虛擬DOM】，注意，這個(gè)【新的虛擬DOM】并不會直接生成【新的真實(shí)DOM】，否則虛擬DOM一點(diǎn)用處也沒有了。Vue的操作是，拿根據(jù)新的數(shù)據(jù)生成的【新的虛擬DOM】與之前的【真實(shí)的DOM】去做比較，如果相同，直接延用即可（“拿來主義”）；如果不同，則生成新的DOM對象。
在這個(gè)過程中key扮演了很重要的角色。
根據(jù)最后一個(gè)示例進(jìn)行剖析。
3.1 key為index的情況
根據(jù)數(shù)據(jù)生成【真實(shí)DOM】的流程如下：（注意，下圖的真實(shí)DOM中輸入框里的內(nèi)容為生成頁面后手動添加）
然后，添加人物“老劉”，獲取到一組新數(shù)據(jù)
Vue拿新數(shù)據(jù)生成【新的虛擬DOM】
在生成真實(shí)DOM，就需要用新生成的虛擬DOM和原來的真實(shí)DOM作比較（一條一條分析）
對比第一條，key為0，找到舊DOM中key為0的數(shù)據(jù)，發(fā)現(xiàn)“老劉-40”和“張三-18”不同，渲染新的數(shù)據(jù)“老劉-40”到頁面上；再往后，發(fā)現(xiàn)同為輸入框，不必重新渲染，直接使用原來真實(shí)DOM的內(nèi)容。第一條內(nèi)容就出現(xiàn)了，而這個(gè)輸入框還攜帶有張三的姓。
對比第二條，key為1，找到舊DOM中key為1的數(shù)據(jù)，發(fā)現(xiàn)“張三-18”和“李四-19”不同，渲染新的數(shù)據(jù)“張三-18”到頁面上；再往后，發(fā)現(xiàn)同為輸入框，不必重新渲染，直接使用原來真實(shí)DOM的內(nèi)容。第二條內(nèi)容就出現(xiàn)了，而這個(gè)輸入框還攜帶有李四的姓。
之后同理。
回顧這個(gè)過程，key是作為虛擬DOM中對象的唯一標(biāo)識，標(biāo)識出了數(shù)據(jù)的“身份信息”，Vue在虛擬DOM中會根據(jù)這個(gè)“身份標(biāo)識”去對比內(nèi)容，設(shè)計(jì)的初衷是為了節(jié)省資源開支，不必渲染重復(fù)的部分。在本示例中，不但帶來了效率問題，還渲染出了錯(cuò)誤的DOM，后果非常嚴(yán)重。
3.2 key為id的情況
直接進(jìn)入添加“老劉”后的新舊DOM對比。
對比第一條，key為‘004’，發(fā)現(xiàn)在舊DOM中并不存在，直接生成“老劉-40”和新的輸入框。
對比第二條，key為‘001’，發(fā)現(xiàn)舊DOM中key為‘001’的數(shù)據(jù)相同，直接將“張三-18”和輸入框拿過來使用。
……
最后生成正確的DOM，節(jié)省了資源開支。
到此，相信大家對“vue的key怎么使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
當(dāng)前題目：vue的key怎么使用
文章來源：http://aaarwkj.com/article20/gjojco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、移動網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、營銷型網(wǎng)站建設(shè)、網(wǎng)站策劃
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 學(xué)校教育行業(yè)網(wǎng)站制作的時(shí)候怎樣正確使用面包屑導(dǎo)航 2023-03-01
- 網(wǎng)站建設(shè)中面包屑導(dǎo)航設(shè)置 2022-07-05
- 網(wǎng)站面包屑導(dǎo)航如何做?有何作用? 2023-04-13
- 網(wǎng)站建設(shè)技術(shù)發(fā)展到今天 面包屑導(dǎo)航應(yīng)該復(fù)雜還是簡化 2016-05-02
- 面包屑導(dǎo)航有什么作用? 2014-01-20
- APP應(yīng)用想要做好用戶體驗(yàn)其難點(diǎn)在哪？ 2022-05-28
- 網(wǎng)站建設(shè)面包屑導(dǎo)航對搜索引擎優(yōu)化的重要性 2022-07-14
- 什么是面包屑導(dǎo)航，它有什么作用？ 2016-09-12
- 網(wǎng)站面包屑導(dǎo)航詳情使用方法和作用 2014-10-10
- 什么是面包屑導(dǎo)航?面包屑導(dǎo)航的作用及注意事項(xiàng) 2023-04-02
- 網(wǎng)站制作面包屑導(dǎo)航為訪客指明方向 2022-08-12
- 網(wǎng)站設(shè)計(jì)中面包屑導(dǎo)航應(yīng)注意什么？ 2016-11-08