iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 27

Day_27:讓 Vite 來開啟你的Vue之 跌入深坑偶像劇_ v-if & v-for 他倆不能在一起啊

Hi Dai Gei Ho~ 我是 Winnie ~

今天的文章中,我們要來說說 v-if & v-for 一起使用的坑。在開始之前,想先請大家來看看以下情境:

當我們有一筆關於方塊的樣式資料,需求是 要依照資料內容 渲然出來之外,還必需 透過 各自物件中的 status狀態 來判斷是否顯示時,要怎麼做呢?

如果是八個月前的我, 想必一定是會很興奮的使用v-for將資料渲染出來,接著加上v-if來進行判斷,就像下面程式碼一樣:

<template>
  <div class="squ" v-for="item in squares" v-if="item.status" key="item" :style="item.style" >
      {{item.id}}
  </div>
</template>
<script>
  setup(){
    const squares =reactive([
        {
          id:1,
          status:false,
          style:{
            width:'100px',
            height:'100px',
            background:'#3C3C3C',
          },
        },
        {
          id:2,
          status:true,
          style:{
            width:'100px',
            height:'100px',
            background:'#5B5B5B',
          },

        }
    ])
    return {
      squares
    }
  }
</script>

接著 很開心的看著預覽畫面,愣住!(年輕人終究是年輕人,衝動誤事) 因為會出現以下錯誤:'status' 為 undefined

這是為什麼呢?

嗯 這就可以回到我們的主題了,v-if與v-for為何不建議ㄧ起使用的原因,依照Vu2與Vue3 可以分為以下兩個原因:

1.優先權順序(Vue3)

在官方文件中有提到 當 Vue3在處理指令時,v-if 會比 v-for 具有更高的優先處理權,所以 v-if 將沒有權限可以訪問 v-for 裡的值。

而再回到剛剛範例中,大家應該就可以清楚知道'status' 為 undefined 的原因是 在v-if是被執行時,squares 中的status 還不存在,所以v-if執行時會找不到值 進而出現錯誤,讓你改都改不了。

2.效能問題 (Vue2)

接著,除了優先權問題之外,不建議兩者一起使用的另一原因是:
在過去 Vue2 中的 v-for與 v-if 優先執行順序是相反過來的, ** v-for 會比 v-if 具有更高的優先處理權。

也就是說,當今天有一百個方塊 要透過 資料中的某一屬性作為渲染判斷時,Vue2 會先透過v-for的迭代渲染物件100次,接著才 執行 v-if的條件渲染。如果只有一個條件符合,也就代表前面的另外的99次被渲染的物件都是多餘的了。

建議使用方式

而文章到這邊你可能會想,不管 我一定要他們在一起? 那我也沒辦法(喂~

如果遇到必要一起使用的情況, 在官方建議 可以 透過computedtemplate來進行處理,使用如下:

computed

通過 計算數性來篩選每個值,回傳給模板。

const setSquaresState = computed(()=>{
    squares.filter(item => item.status)
})

return { setSquaresState }

template

另外,也可以通過 <template>標籤將元件包起來,達成元件渲染。

    <template v-for='item in squares' :key="item" >
      <div class="squ" v-if="item.status" :style="item.style" >
        {{item.id}}
      </div>
    </template>

以上 就是針對 v-if & v-for 為何不能再在一起的故事的說明,如有問題歡迎大家多多指教,謝謝大家。

--- 小記事 ---
今天好像沒發生什麼事,不知道要說什麼,只好送上一直放在我心底的一句話給大家

『不要焦慮,不要瞎忙』

今天聽的是 告五人 披星戴月的想你...


上一篇
Day_26: 讓 Vite 來開啟你的Vue之 跌入深坑_ 我該用 reactive 還是 ref
下一篇
Day_28:讓 Vite 來開啟你的Vue之 跌入深坑_生命週期 hooks 與 async/await
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

尚未有邦友留言

立即登入留言