快捷導(dǎo)航

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

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

v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時(shí)用在同一個(gè)元素上,下面這篇文章主要給大家介紹了關(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ù)組，對(duì)象，字符串

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

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

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

4.v-for中key

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

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

5.key的好處

可以提高更新的性能

v-set

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

方法：

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

重繪和回流

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

虛擬DOM

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

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

computed計(jì)算屬性

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

事例：

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

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