快捷導(dǎo)航

一文帶你詳細(xì)了解Vue中的v-for

更新時間：2022年10月25日 09:59:55 作者：前端楠戈

v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時用在同一個元素上,下面這篇文章主要給大家介紹了關(guān)于如何通過一文帶你詳細(xì)了解Vue中v-for的相關(guān)資料,需要的朋友可以參考下

v-for

作用：列表渲染，所在標(biāo)簽結(jié)構(gòu)，按照數(shù)據(jù)數(shù)量，循環(huán)生成。指令寫在誰身上，就循環(huán)創(chuàng)建誰

1.語法：

v-for = "(值變量，索引變量) in 目標(biāo)結(jié)構(gòu)" ：key = 索引變量

v-for = "值變量 in 目標(biāo)結(jié)構(gòu) ：key = 索引變量"

目標(biāo)結(jié)構(gòu)：可以是數(shù)組，對象，字符串

2.數(shù)組方法如果修改了原數(shù)據(jù)就會更新頁面，如果沒有修改，則不會，但可以重新賦值給變量讓你頁面更新

3.v-for中的key作用：在更新的時候：

有key，按照key比較，key設(shè)置為index：等于沒設(shè)，就地復(fù)用
無key，就地更新

4.v-for中key

唯一不重復(fù)的字符串或者數(shù)值，數(shù)組中的id

key在使用過程中，有id用id，無id用索引

5.key的好處

可以提高更新的性能

v-set

作用：因為vue是數(shù)據(jù)驅(qū)動頁面的，所以修改原數(shù)組中可以使用this.arr[0]='測試'但是，由于官方vue2特有的bug，導(dǎo)致這樣修改原數(shù)組失效，雖然數(shù)組確實改變了，但是頁面直接沒更新，如果需要這樣修改數(shù)據(jù)，就需要$set方法來修改

方法：

this.$set(修改數(shù)組，索引，‘修改的內(nèi)容')

重繪和回流

重繪：元素的顏色/透明度發(fā)生變化
回流：元素的幾何信息（寬度/位置）發(fā)生變化
回流是把結(jié)構(gòu)重新畫出來，重繪給你上色
回流一定觸發(fā)重繪，但重繪不一定會引起回流

虛擬DOM

含義：本質(zhì)上是一個js對象，保存DOM關(guān)鍵信息

好處：提高DOM更新的性能，不頻繁操作真實的DOM，在內(nèi)存中找到變化部分，再更新真實DOM相應(yīng)屬性或內(nèi)容（打補?。?/p>

computed計算屬性

語法:定義在computed中和data（）{}并齊

事例：

   computed:{
       totalPrice(){//計算屬性名
         set(val){ //在計算機屬性被修改時執(zhí)行
             //val是計算屬性賦的值
         }
         get(){  //get在計算機屬性被調(diào)用（訪問）時執(zhí)行
         //必須return一個結(jié)果
         }
         return this.count*this*this.price//返回運算結(jié)果
       }
     }

緩存：計算屬性，基于依賴項的值進行緩存，依賴的變量不變，都直接從緩存取結(jié)果（帶緩存）