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

建议使用方式

而文章到这边你可能会想，不管 我一定要他们在一起？ 那我也没办法（喂～

如果遇到必要一起使用的情况， 在官方建议 可以 透过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 为何不能再在一起的故事的说明，如有问题欢迎大家多多指教，谢谢大家。

--- 小记事 ---
今天好像没发生什麽事，不知道要说什麽，只好送上一直放在我心底的一句话给大家

『不要焦虑，不要瞎忙』

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