快捷導(dǎo)航

Vue3中v-if和v-for優(yōu)先級(jí)實(shí)例詳解

更新時(shí)間：2022年09月07日 10:53:44 作者：孤山漸青

Vue.js中使用最多的兩個(gè)指令就是v-if和v-for,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-if和v-for優(yōu)先級(jí)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

在vue2中應(yīng)盡量避免二者同時(shí)使用

vue 2.x官方鏈接

當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)。

那么,我們舉個(gè)例子說(shuō)明為啥不推薦

<template>
  <div class="hello">
     <div  v-for="(item,index) in list" v-if="index === 9" :key="item" ></div>
  </div>
</template>
?
<script>
export default {
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]   //需要遍歷的數(shù)據(jù)
    }
  }
};
</script>
?
<style scoped>
</style>

它實(shí)際經(jīng)過(guò)的運(yùn)算是這樣的

this.list.map(function (item,index) {
  if (index===9) {
    return item
  }
})

因此哪怕我們只渲染出一小部分的元素，也得在每次重渲染的時(shí)候遍歷整個(gè)列表，不論是否發(fā)生了變化。

不建議這樣做的原因就是比較浪費(fèi)性能

Vue2 推薦的改進(jìn)方案也是比較簡(jiǎn)單,就是采用計(jì)算屬性去生成你要遍歷的數(shù)組

如下

<template>
  <div class="hello">
    <!-- 2. 然后這里去循環(huán)已經(jīng)被過(guò)濾的屬性 -->
     <div  v-for="(item) in ListArr" :key="item" ></div>
  </div>
</template>
?
<script>
export default {
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]
    }
  },
  computed:{
    //1. 在computed里先做好判斷，這里過(guò)濾的成本遠(yuǎn)比v-if的成本低
    ListArr(){
        return this.list.filter((_,index) => index === 1)
    }
  }
};
</script>
<style scoped>
</style>

從計(jì)算成本上來(lái)說(shuō)，在計(jì)算屬性中過(guò)濾會(huì)比在dom中判斷是否顯示更低。

vue3中的改變

vue 3.x官方文檔

當(dāng) v-if 與 v-for 一起使用時(shí)，v-if 具有比 v-for 更高的優(yōu)先級(jí)。

那么是不是就可以鼓勵(lì)大家這樣使用呢?很顯然不是,官方文檔仍然不推薦同時(shí)使用,我們看下為什么

同樣的,我們?nèi)匀皇褂蒙厦胬幼龇治?/p>

<template>
  <div class="hello">
     <div  v-for="(item,index) in list" v-if="index === 9" :key="item" ></div>
  </div>
</template>
?
<script>
export default {
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]   //需要遍歷的數(shù)據(jù)
    }
  }
};
</script>
<style scoped>
</style>

由于 v-if 優(yōu)先級(jí)高,導(dǎo)致頁(yè)面什么也不會(huì)渲染,控制臺(tái)還有報(bào)錯(cuò)

[Vue warn]: Property "index" was accessed during render but is not defined on instance.

當(dāng)然還有一些其它用法例如這種,可以顯示數(shù)據(jù),只是會(huì)一些Vue warn的警告

<template>
  <div class="hello">
     <ul>
        <li v-for="(item, index) in list" :key="index" v-if="item.show">
          {{ item.name }}
        </li>
      </ul>
  </div>
</template>
?
<script>
export default {
  data(){
    return {
      list:[
       { name: '張三', show: false },
       { name: '李四', show: true },
      ]   //需要遍歷的數(shù)據(jù)
    }
  }
};
</script>
<style scoped>
</style>

這種方法也不是最好的,官方推薦的寫(xiě)法是這樣的, 把 v-for 移動(dòng)到容器元素上,例如ul,ol 或者外面包裹一層 template

<template>
  <div class="hello">
     <ul>
         <template v-for="(item, index) in list" :key="index">
          <li v-if="item.show">
            {{ item.name }}
          </li>
        </template>
      </ul>
  </div>
</template>
?
<script>
export default {
  data(){
    return {
      list:[
       { name: '張三', show: false },
       { name: '李四', show: true },
      ]   //需要遍歷的數(shù)據(jù)
    }
  }
};
</script>
<style scoped>
</style>

但如果想要有條件地跳過(guò)循環(huán)的執(zhí)行，那么可以將v-if置于外層元素或者template上。

例如這樣

<template>
  <div class="hello">
     <ul v-if="list.length">
          <li v-for="(item, index) in list" :key="index">
            {{ item.name }}
          </li>
      </ul>
  </div>
</template>
?
<script>
export default {
  data(){
    return {
      list:[
       { name: '張三', show: false },
       { name: '李四', show: true },
      ]   //需要遍歷的數(shù)據(jù)
    }
  }
};
</script>
<style scoped>
</style>

結(jié)論

在vue2中，v-for的優(yōu)先級(jí)高于v-if
在vue3中，v-if的優(yōu)先級(jí)高于v-for
兩種混在一起寫(xiě)法均不被官方推薦

補(bǔ)充：注意事項(xiàng)

1.永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上，帶來(lái)性能方面的浪費(fèi)（每次渲染都會(huì)先循環(huán)再進(jìn)行條件判斷）

2.如果避免出現(xiàn)這種情況，則在外層嵌套template（頁(yè)面渲染不生成dom節(jié)點(diǎn)），在這一層進(jìn)行v-if判斷，然后在內(nèi)部進(jìn)行v-for循環(huán)

<template v-if="isShow">
    <p v-for="item in items">
</template>

3.如果條件出現(xiàn)在循環(huán)內(nèi)部，可通過(guò)計(jì)算屬性computed提前過(guò)濾掉那些不需要顯示的項(xiàng)

computed: {
    items: function() {
      return this.list.filter(function (item) {
        return item.isShow
      })
    }
}

總結(jié)

到此這篇關(guān)于Vue3中v-if和v-for優(yōu)先級(jí)詳解的文章就介紹到這了,更多相關(guān)Vue3 v-if和v-for優(yōu)先級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: