[TOC] >[success] # 通過案例了解key ~~~ 1.本文案例是來自極客時間vue視頻課，尊重原創，歡迎大家可以去購買這個 課真的是讓我受益匪淺 2.通過代碼對上節文章中的場景說明 ~~~ >[info] ## 下面案例準備工作 ~~~ 1.下面的案例是通過組件的方式，來更加形象的說明剛才的圖解，在上個章節已經說明了組價和dom其實是類似 的，這里選擇組件的原因主要是為了可以看到生命周期更加形象的說明問題 ~~~ >[danger] ##### 下面的組件說明 ~~~ 1.下面組件中內部統一寫法其實都是一樣 2.當然里面打印的內容是根據組件名稱來定義的例如下面案例對應其實是組件'<ChildrenC>' 3.只有組件B和其他組略微不同 4.下面代碼中的'init' 和'orderAsc' 都是在data中聲明的boolean值 ~~~ ~~~ <template> <div class="border1"> <h2>C 結點</h2> <slot></slot> </div> </template> <script> export default { mounted() { console.log("C mounted"); }, updated() { console.log("C updated"); }, destroyed() { console.log("C destroyed"); } }; </script> ~~~ * 特殊的組件B ~~~ <template> <div class="border1"> <h2>B 結點 {{ number }}</h2> <slot></slot> </div> </template> <script> export default { props: { number: Number }, mounted() { console.log(`B${this.number || ""} mounted`); }, updated() { console.log(`B${this.number || ""} updated`); }, destroyed() { console.log(`B${this.number || ""} destroyed`); } }; </script> ~~~ >[info] ## 正式開始案例 ~~~ 1.下面的案例都是縮寫，如果想自己也實現一個可以根據上面的組件說明中的寫法自己進行反推 2.下面的案例都是根據上個章節中個個圖解的代碼說明 ~~~ >[danger] ##### 第一場景案例  ~~~ 1.下面案例當點擊按鈕的時候B,C,D 三個組件(組件和dom的方式其實是一樣 的)會相互移動，下面案例的三個組件相當于場景一，三個不同類型dom元素 ，并且在上個組件中的生命周期加上console.log() 可以直觀的看到他們變化情況 2.點擊按鈕后打印效果: 在控制臺沒有任何輸出內容,說明就像圖中展示的效果一樣，這種的順序 移動不會產生'dom重新渲染' ~~~ ~~~ <template> <div class="border"> <h1>A 結點</h1> <button @click="orderAsc = !orderAsc">移動</button> <div v-if="orderAsc"> <ChildrenB /> <ChildrenC> </ChildrenC> <ChildrenD /> </div> <div v-else> <ChildrenC> </ChildrenC> <ChildrenD /> <ChildrenB /> </div> </div> </template> ~~~ >[danger] ##### 場景二說明  ~~~ 1.B,C,D組件在虛擬樹上屬于同一個節點，點擊按鈕后，將C組件結構放到， B組件內,這種情況其實就是對應'刪除CEF，新建CEF' 2.打印結果: E destroyed F destroyed C destroyed E mounted F mounted C mounted B updated 3.通過打印結果可以看出來，會先刪除dom樹中最下面的葉子節點也就是E，F然后在刪除C節點， 在依次創建E,F,C節點，最后更新B節點也就是變化節點 ~~~ ~~~ <template> <div class="border"> <h1>A 結點</h1> <button @click="init = !init">刪除CEF，新建CEF</button> <div v-if="init"> <ChildrenB /> <ChildrenC> <ChildrenE /> <ChildrenF /> </ChildrenC> <ChildrenD /> </div> <div v-else> <ChildrenB> <ChildrenC> <ChildrenE /> <ChildrenF /> </ChildrenC> </ChildrenB> <ChildrenD /> </div> </div> </template> ~~~ >[danger] ##### 場景三的案例  ~~~ 1.刪除CEF，新建GEF 2.點擊后打印結果: E destroyed F destroyed C destroyed E mounted F mounted G mounted ~~~ ~~~ <template> <div class="border"> <h1>A 結點</h1> <button @click="init = !init">刪除CEF，新建GEF</button> <div v-if="init"> <ChildrenB /> <ChildrenC> <ChildrenE /> <ChildrenF /> </ChildrenC> <ChildrenD /> </div> <div v-else> <ChildrenB /> <ChildrenG> <ChildrenE /> <ChildrenF /> </ChildrenG> <ChildrenD /> </div> </div> </template> ~~~ >[danger] ##### 場景四（相同dom 或者相同組件）  ~~~ 1.相同組件或者dom 沒有加'key'的情況，會先刪除E,F 并且最后更新B1和B2 2.打印結果： E mounted F mounted E destroyed F destroyed B1 updated B2 updated 2.這個案例可以看出一點跟我們預期有點不同是先創建了E,F 然后又銷毀了之前的E，F，最后在更新 B1和B2 ~~~ ~~~ <template> <div class="border"> <h1>A 結點</h1> <button @click="init = !init">更新刪除新建</button> <div v-if="init"> <ChildrenB :number="1" /> <ChildrenB :number="2"> <ChildrenE /> <ChildrenF /> </ChildrenB> <ChildrenB :number="3" /> </div> <div v-else> <ChildrenB :number="2"> <ChildrenE /> <ChildrenF /> </ChildrenB> <ChildrenB :number="1" /> <ChildrenB :number="3" /> </div> </div> </template> ~~~ >[danger] ##### 場景五移動有key （相同dom 或者相同組件）  ~~~ 1.相同dom 和相同組件加'key',發現不會像上面的案例出現，先刪除E，F組件，在創建 E,F組件在更新，這次反而會直接更新B2 一步到位 2.打印結果： B2 updated 3.和上面的案例做了同樣一件事明顯可以看出加'key'的好處 ~~~ ~~~ <template> <div class="border"> <h1>A 結點</h1> <button @click="init = !init">移動(有key)</button> <div v-if="init"> <ChildrenB key="1" :number="1" /> <ChildrenB key="2" :number="2"> <ChildrenE /> <ChildrenF /> </ChildrenB> <ChildrenB key="3" :number="3" /> </div> <div v-else> <ChildrenB key="2" :number="2"> <ChildrenE /> <ChildrenF /> </ChildrenB> <ChildrenB key="1" :number="1" /> <ChildrenB key="3" :number="3" /> </div> </div> </template> ~~~ >[danger] ##### 場景六 無key 新增 （相同dom 或者相同組件）  ~~~ 1.當無key 插入一個新的節點的時候，會先銷毀不相同的節點并且在重新更 新 2.打印結果： B3 destroyed B3 updated B2 updated ~~~ ~~~ <template> <div class="border"> <h1>A 結點</h1> <button @click="init = !init">更新新建(無key)</button> <div v-if="init"> <ChildrenB :number="1" /> <ChildrenB :number="2" /> <ChildrenB :number="3" /> </div> <div v-else> <ChildrenB :number="1" /> <ChildrenB :number="4" /> <ChildrenB :number="2" /> <ChildrenB :number="3" /> </div> </div> </template> ~~~ >[danger] ##### 場景六 有key  ~~~ 1.打印結果： B4 mounted 2.和上面案例相比如果綁定了'key',可以發現只需要創建一次B4 一步到位 ~~~