這篇文章主要介紹使用vue for時為什么要key的原因，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為靈石企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計，靈石網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

一.diff算法

修改渲染真實的dom會引起整個dom樹的重繪和重排。diff算法可以幫助我們只對我們想要修改的部分進(jìn)行更新而不會引起整個dom樹的重繪和重排。 我們先根據(jù)dom生成virtual DOM，當(dāng)virtual Dom上的某個dom節(jié)點數(shù)據(jù)改變后會生成一個新的Vnode.將新生成的Vnode和oldVnode做對比。發(fā)現(xiàn)有修改的地方就直接渲染到真實的dom樹上。

diff算法一邊比較新舊節(jié)點的區(qū)別一邊在真實的dom樹上打補(bǔ)丁

二.key的作用

我個人覺得key的作用就是為了快速的找到新節(jié)點對應(yīng)的舊節(jié)點。key是給每一個vnode唯一的id,可以依靠key,更準(zhǔn)確, 更快的拿到oldVnode中對應(yīng)的vnode節(jié)點。但不使用key時代碼也可以運(yùn)行但是會報warning.為什么呢。

三.不使用key時的執(zhí)行

例:不使用key 一個數(shù)組arr=['1','2','3','4','5','6']。

    {{item}}
  

上面代碼會生成6個div每個div對應(yīng)的arr中的數(shù)字?，F(xiàn)在我們將arr變成[0, 1, 2, 3, 7, 8, 9]。更新渲染的步驟時這樣的原先div中的1變成0 2變成1以此類推最后新增一個div內(nèi)容為9。 Vue會通過改變原來元素的內(nèi)容和增加/減少元素來完成這個改變，因為沒有key屬性，Vue無法跟蹤每個節(jié)點，只能通過這樣的方法來完成變更。

四.使用key時

例:numbers為[1, 2, 3, 7, 8, 9]

   {{num}}