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次被渲染的物件都是多餘的了。

建議使用方式

而文章到這邊你可能會想，不管 我一定要他們在一起？ 那我也沒辦法（喂～

如果遇到必要一起使用的情況， 在官方建議 可以 透過computed與template來進行處理，使用如下：

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 為何不能再在一起的故事的說明，如有問題歡迎大家多多指教，謝謝大家。

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

『不要焦慮，不要瞎忙』

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