今天開(kāi)始學(xué)習(xí)前端最流行的框架之一：vue.js店读，之前大概看過(guò)一些AngularJS的文章纫普，但沒(méi)有仔細(xì)學(xué)習(xí)過(guò)一個(gè)框架，所以這應(yīng)該是我學(xué)習(xí)的第一個(gè)前端框架朗伶。好記性不如爛筆頭弦撩，在此寫(xiě)一些學(xué)習(xí)筆記，以記錄學(xué)習(xí)過(guò)程论皆。
對(duì)我來(lái)說(shuō)益楼，學(xué)習(xí)一個(gè)東西的方式是在使用過(guò)程中慢慢了解熟悉它猾漫，在看了vue官方文檔的安裝和起步兩個(gè)章節(jié)后，我打算先寫(xiě)一個(gè)小demo熟悉一下學(xué)習(xí)到的簡(jiǎn)單語(yǔ)法感凤，就是一個(gè)todo list.
這個(gè)todo list的主要功能是添加悯周，刪除todo事項(xiàng)，以及事項(xiàng)的完成和撤銷(xiāo)完成俊扭，并使用localStorage在客戶(hù)端存儲(chǔ)數(shù)據(jù)队橙。圖如下：
寫(xiě)完之后，我發(fā)現(xiàn)一個(gè)問(wèn)題萨惑，就是當(dāng)我點(diǎn)擊列表第一項(xiàng)的checkbox表示完成這項(xiàng)todo時(shí)捐康，下一項(xiàng)的checkbox被自動(dòng)選中（此時(shí)原來(lái)的第一項(xiàng)已經(jīng)移動(dòng)到已完成列表，這一項(xiàng)變成第一項(xiàng)）庸蔼，我覺(jué)得很奇怪解总，測(cè)試了一番又發(fā)現(xiàn)，在已完成列表中取消完成也會(huì)有這種情況姐仅，總之點(diǎn)擊之后checkbox的選中情況有點(diǎn)錯(cuò)亂花枫。
找bug過(guò)程就不說(shuō)了，也許應(yīng)當(dāng)先多閱讀閱讀官方文檔再下手寫(xiě)的掏膏。
部分代碼如下：
<li v-for="item in unFinishedList">
<input type="checkbox" v-on:click="toggleFinish(item)">
<p v-text="item.label"></p>
<span v-on:click="deleteItem(item)">X</span>
</li>
computed:{
unFinishedList:function(){
return this.items.filter(function(item){
return !item.isFinished;
})
}
}
問(wèn)題就出v-for的渲染上,官方文檔上有這么一段話(huà)：
當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)劳翰，它默認(rèn)用 “就地復(fù)用” 策略。如果數(shù)據(jù)項(xiàng)的順序被改變馒疹，Vue將不是移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序佳簸， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素颖变。
這個(gè)默認(rèn)的模式是有效的生均，但是只適用于不依賴(lài)子組件狀態(tài)或臨時(shí) DOM 狀態(tài)（例如：表單輸入值）的列表渲染輸出。
因?yàn)?“就地復(fù)用” 策略腥刹，所以更新渲染todo列表時(shí)马胧，第一個(gè)checkbox仍然是選中的。
解決方法有兩個(gè)衔峰，一個(gè)是為每個(gè)li添加key,文檔中還有這么一段話(huà)：
為了給 Vue 一個(gè)提示佩脊，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素垫卤，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性威彰。
這是一個(gè)解決方法，但不是最好最有效的葫男，文檔又說(shuō)：
建議盡可能使用 v-for 來(lái)提供 key ，除非迭代 DOM 內(nèi)容足夠簡(jiǎn)單崔列，或者你是故意要依賴(lài)于默認(rèn)行為來(lái)獲得性能提升梢褐。
因?yàn)檫@個(gè)demo比較簡(jiǎn)單旺遮，所以其實(shí)不必要設(shè)key，還有一種方法就是todo事項(xiàng)的事件不一定要用v-on:click盈咳，我在checkbox的點(diǎn)擊上用的是v-on:click="toggleFinish(item)來(lái)切換狀態(tài)耿眉，但其實(shí)大可不必如此，只要設(shè)置v-model="item.isFinished"就可以達(dá)到同樣的效果鱼响。
對(duì)比一下還是第二種方法比較好鸣剪，因?yàn)槲臋n只看了起步，所以寫(xiě)的時(shí)候沒(méi)考慮到用這個(gè)丈积，直接用了click事件筐骇。不過(guò)了解一下v-for渲染時(shí)的“就地復(fù)用”策略也是好的。
PS：第一次寫(xiě)博客江滨，可能比較啰嗦铛纬，因?yàn)榘l(fā)現(xiàn)記性不好使了，一個(gè)坑反復(fù)跳唬滑，過(guò)幾個(gè)星期就忘了告唆，所以打算寫(xiě)一寫(xiě)，可能沒(méi)有什么干貨晶密，權(quán)當(dāng)做筆記了擒悬，如果有寫(xiě)的不對(duì)的地方，還望路過(guò)的大神指點(diǎn)一二稻艰，感謝懂牧！
