快捷導(dǎo)航

Vue基礎(chǔ)教程之條件渲染和列表渲染

更新時(shí)間：2021年11月12日 17:13:14 作者：蜜瓜的前端進(jìn)階

Vue會(huì)盡可能高效地渲染元素,通常會(huì)復(fù)用已有元素而不是從頭開始渲染。這么做會(huì)使Vue變得非?？?下面這篇文章主要給大家介紹了Vue基礎(chǔ)教程之條件渲染和列表渲染的相關(guān)資料,需要的朋友可以參考下

前言

什么是條件渲染？在我們的頁面中會(huì)有很多這樣的應(yīng)用場景，比如說我們今天要上架一個(gè)活動(dòng)，這個(gè)活動(dòng)頁面只在今天有效，在晚上的24點(diǎn)或者說在明天早上凌晨0點(diǎn)1秒的時(shí)候就要把這個(gè)頁面下下來，把這個(gè)圖片隱藏掉。如果我們安排一個(gè)運(yùn)維兄弟手動(dòng)去改HTML，那么運(yùn)維兄弟就會(huì)瘋掉的，其實(shí)這里就會(huì)有一個(gè)很簡單的辦法，就是條件的渲染，即當(dāng)0點(diǎn)的時(shí)候我們?nèi)ヅ袛噙@個(gè)條件，如果這個(gè)條件達(dá)到了比如說24點(diǎn)或者是0點(diǎn)一個(gè)時(shí)間點(diǎn)，之后就把它隱藏起來，這個(gè)就是一個(gè)條件的渲染。

什么是列表渲染呢？這個(gè)就是最常見的，比如說在頁面上有很多個(gè)元素，很多的圖片，像新聞網(wǎng)站一次加載20條，如果用手敲去寫HTML，那樣新聞網(wǎng)站的人就不用去干活了，每天就去敲HTML代碼了，這里面就會(huì)有類似于我們C語言代碼里面的for循環(huán)那樣，有一個(gè)循環(huán)語句在這個(gè)地方，讓我們把這個(gè)頁面的元素構(gòu)建出來生成出來，這就是列表渲染。1 v-if 和 v-show

1.1 作用

都用來控制元素的顯示和隱藏

1.2 控制元素顯隱的方式

v-if控制虛擬DOM樹上元素的創(chuàng)建和銷毀，Vue的響應(yīng)系統(tǒng)會(huì)根據(jù)虛擬DOM樹對(duì)實(shí)際DOM進(jìn)行更新，從而間接控制實(shí)際DOM上元素的顯隱

v-show通過給元素添加樣式display:none來讓元素隱藏

1.3 初始渲染對(duì)比

v-if是惰性的，如果初始渲染條件為false，什么都不做；只有條件為true，才會(huì)開始編譯

v-show不管初始渲染條件如何，元素始終被編譯并保留，之后根據(jù)條件通過CSS切換

1.4 切換消耗對(duì)比

如果頻繁切換顯示與隱藏，v-if會(huì)頻繁創(chuàng)建、銷毀元素，而v-show只是切換樣式

故v-if的切換消耗更高

1.5 使用場景對(duì)比

如果元素的顯示隱藏在一開始就定下來不會(huì)再變了，使用v-if

如果元素需要頻繁切換顯隱，使用v-show

1.6 其他

v-if可以搭配template使用，v-show不可以
v-if可以搭配v-else，v-show無特殊語法

2 v-if 和 v-for

2.1 v-if 和 v-for 不能同時(shí)用的原因

為什么不能把v-if和v-for同時(shí)用在同一個(gè)元素上？

當(dāng) Vue 處理指令的時(shí)候，v-for的優(yōu)先級(jí)比v-if高，因此這個(gè)模板：

<ul>
  <li v-for="item in list" v-if="item.isActive" :key="item.id">
    {{item.name}}
  </li>
</ul>

會(huì)經(jīng)過如下運(yùn)算：

this.list.map(function(item) {
  if (item.isActive) {
    return item.name
  }
})

我們每次重新渲染的時(shí)候都要遍歷整個(gè)列表，即使isActive為true的item很少，這會(huì)帶來性能方面的極大浪費(fèi)，因此兩者不能同時(shí)用在同一個(gè)元素上

2.2 v-if 和 v-for 一起用的解決方案

1、如果想控制整個(gè)列表的顯隱，可以將v-if移動(dòng)到容器元素上，比如：

<body>
  <div id="example">
    <ul v-if="listShow">
      <li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      list: [
        { id: 1, name: "路飛", isActive: true },
        { id: 2, name: "索隆", isActive: false },
        { id: 3, name: "山治", isActive: true },
      ],
      listShow: false,
    }
  });
</script>

2、如果想過濾列表中的項(xiàng)目，可以使用計(jì)算屬性(computed)返回過濾后的列表，比如：

<body>
  <div id="example">
    <ul>
      <li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      list: [
        { id: 1, name: "路飛", isActive: true },
        { id: 2, name: "索隆", isActive: false },
        { id: 3, name: "山治", isActive: true },
      ],
    },
    computed: {
      activeItems: function () {
        return this.list.filter((item) => item.isActive);
      },
    },
  });
</script>

3 列表渲染的 key 有什么用

在使用v-for進(jìn)行列表渲染時(shí)，必須給元素添加一個(gè)key屬性，并且這個(gè)key必須是唯一標(biāo)識(shí)

<ul>
 <li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>

我們知道，Vue 在更新元素時(shí)，不會(huì)直接操作真實(shí)DOM（渲染真實(shí)DOM開銷是很大的），而是根據(jù)新數(shù)據(jù)生成新的虛擬 DOM，然后對(duì)新舊虛擬DOM進(jìn)行差異對(duì)比，根據(jù)對(duì)比結(jié)果進(jìn)行DOM操作來更新視圖

列表渲染時(shí)，如果有key屬性，由于它是唯一標(biāo)識(shí)，在對(duì)比兩個(gè)新舊節(jié)點(diǎn)時(shí)若key不同也就沒有深入對(duì)比的必要了。

為什么不能用index作為key？因?yàn)閕ndex是不穩(wěn)定可變的，比如刪除了列表第一個(gè)元素，會(huì)導(dǎo)致后面的元素index發(fā)生變化，從而導(dǎo)致key發(fā)生變化。這時(shí)，Vue 在對(duì)比新舊節(jié)點(diǎn)時(shí)，遇到key相同的節(jié)點(diǎn)，就會(huì)進(jìn)行深入對(duì)比，發(fā)現(xiàn)節(jié)點(diǎn)內(nèi)容發(fā)生了變化，就會(huì)去創(chuàng)建新的真實(shí)DOM用來替換原來的真實(shí)DOM。原本只需要?jiǎng)h除真實(shí)DOM中第一個(gè)元素的操作，會(huì)變成新建、替換后續(xù)所有真實(shí)DOM，造成性能的極大浪費(fèi)