在 Vue 2 和 Vue 3 中，v-for 和 v-if 可以一起使用，但兩者在處理順序和推薦用法上存在明顯區別，主要體現在優先級和最佳實踐上：
1. Vue 2 中的 v-for 與 v-if
-
優先級：
v-for的優先級高于v-if。
這意味著 Vue 會先循環渲染所有列表項，再對每個項執行v-if判斷是否顯示。
即使某些項會被v-if過濾掉，它們仍然會被先渲染再隱藏，存在性能浪費。 -
示例：
<ul><li v-for="item in list" v-if="item.active" :key="item.id">{{ item.name }}</li> </ul>上述代碼會先遍歷
list中的所有項，再判斷每個項的active為true才顯示，低效且不推薦。 -
最佳實踐：
應避免直接在同一元素上使用，推薦使用 計算屬性 先過濾數據，再用v-for渲染：computed: {activeList() {return this.list.filter(item => item.active)} }<ul><li v-for="item in activeList" :key="item.id">{{ item.name }}</li> </ul>
2. Vue 3 中的 v-for 與 v-if
-
優先級：
v-if的優先級高于v-for。
這意味著v-if會先判斷是否渲染整個列表（或列表的父元素），再決定是否執行v-for循環。
此時v-if無法訪問v-for中的迭代變量（如item），因為循環還未執行。 -
示例：
<!-- 錯誤用法：v-if 無法訪問 item --> <ul><li v-for="item in list" v-if="item.active" :key="item.id">{{ item.name }}</li> </ul>上述代碼在 Vue 3 中會報錯，因為
v-if執行時item尚未定義。 -
最佳實踐：
- 若需過濾列表項：同樣使用 計算屬性 先過濾數據（與 Vue 2 一致）。
- 若需控制整個列表是否渲染：可將
v-if放在v-for的父元素上：<ul v-if="shouldShowList"><li v-for="item in list" :key="item.id">{{ item.name }}</li> </ul>
總結區別
| 場景 | Vue 2 | Vue 3 |
|---|---|---|
| 優先級 | v-for > v-if | v-if > v-for |
| 同一元素使用效果 | 先循環后判斷（有性能問題） | 報錯（v-if 無法訪問循環變量） |
| 推薦用法 | 用計算屬性過濾數據 | 用計算屬性過濾數據 |
| 控制整個列表顯示 | 需額外處理 | 可在父元素用 v-if 控制 |
核心結論：無論 Vue 2 還是 Vue 3，都不推薦在同一元素上同時使用 v-for 和 v-if，最佳實踐是通過計算屬性預處理數據，既保證性能又避免邏輯混亂。
