vue的v-for中不加：key貌似也能正常顯示，為什麼要加：key呢？
我們知道vue可以動態的改變頁面的結構，比如在乙個div裡面插入乙個span標籤，看似簡單的操作，底層還是很複雜的，它是如何實現的呢？因為頁面的html**是dom樹形結構，所以這個問題可以理解為將一棵樹形結構轉換為另一棵樹形結構，diff演算法就是用來幹這個事的。要想把一棵樹轉換為另一棵樹首先要解決的問題就是比較這兩棵樹之間的區別vue對diff演算法進行了優化，它是這樣做的。
現在要把左邊的dom樹轉換為右邊的dom樹，對每層去比較，找出每層節點的不同之處做相應的處理。
對於每一層節點是如何處理的呢？上面的一排a,b,c是原來的節點，下面的一排c,b,a是轉換後要成為的節點。
原來的節點a(也可以為一組節點)去和轉換後的節點c(也可以為一組節點)比較發現並不相同，則會建立節點c並刪除節點a，節點b(也可以為一組節點)比較發現相同不變化，節點c和a比較發現不同，建立節點a，刪除節點c.如此，該層的節點就由a b c轉化成了 c b a 。
如此這番折騰，cpu估計會累的夠嗆，既然這些節點本身沒有發生變化，只是位置變了，有沒有可能只是去調整節點的位置而不用去做如此之多的建立，刪除操作呢？必然是有的。
我們可以對同一層級的同組節點新增乙個唯一的key進行區分，此處的key就好比資料庫裡面主鍵的概念，通過它可以唯一的確定一組節點。
這樣vue就可以識別出每一組節點，經過比較key發現，a,b,c都是相同的。只是位置發生了變化，於是他就只是去做移動操作調整位置，而不是去做建立和刪除的操作了，效率大大提高。
從這裡可以看出，在做for迴圈的時候加入：key,可以讓vue能夠識別每一組節點，在一些場合中讓我們的**效率更高。
還有乙個問題就是key的取值，很多夥伴習慣這裡取索引index,能行嗎？索引是按位置排序的，這裡c的key變成了1，a的key變成了3，失去了key的功能，沒有辦法唯一確定一組節點了。
Vue實戰專案開發 vue基礎精講
vue的每乙個元件都是乙個例項，該例項對應著很多屬性和方法。生命週期函式就是vue例項在某乙個時間點自動執行的函式 插值 文字 資料繫結最常見的形式就是使用 mustache 語法 雙大括號 的文字插值 原始html v html 雙大括號會將資料解釋為普通文字，而非 html 為了輸出真正的 ht...
Vue 框架 08 基礎實戰 demo
前面介紹了有 7 篇了，都是小例項，沒有相對完整的應用，雖然有些功能挺實用，但還是有的不常用的，今天記錄一篇關於前幾篇基礎內容的實戰 demo，也是對 vue 基礎的簡單應用。來看截圖 源 html 檔案 愛心打氣筒 選擇b 打氣重置 這裡什麼都沒有 源 js 檔案 例項化 vue 物件 new v...
Vue實戰筆記
1 元件的屬性 例子 class hello props name demo title 我是title title是原生屬性，當inheritattrs為false時，原生屬性不顯示 2 事件 3 插槽 4 如何觸發元件的更新 vue在例項化的時候，會對data裡的資料進行getter和sette...