1.在vue2中,v-for的优先级高于v-if,把它们放在同一个标签上时,页面每次渲染的时候都会重复的进行判断是十分消耗性能的

2.在vue3中,又恰好相反v-if的优先级是高于v-for的,同样vue3也不能把它们两者写在一起,正因为v-if优先于v-for,并且v-if又依赖v-for的数据源,在这个情况下将会出现报错的情况。

3.一般我们在处理v-if和v-for连用的场景时我们可采取下列方式:

(1).在循环渲染之前先用filter过滤下不需要的数据,也可以使用computed计算属性进行过滤

  (2)   .如果需要根据条件渲染单个项,可以将 v-if 放在内层元素上。疑问:将v-for和v-if写在同层级和v-for中嵌套v-if有什么区别呢?

        回答:

  • v-ifv-for 写在同一层级时,Vue 会在渲染组件时,先根据 v-for 遍历出所有的子元素,并将它们都生成对应的 Virtual DOM,然后再根据 v-if 条件判断是否需要将这些元素渲染出来。如果元素不符合条件,则将它们对应的 Virtual DOM 从渲染队列中移除。
  • 将 v-if 放在内层元素上时,Vue 可以先根据 v-for 遍历出所有的子元素,但只有符合 v-if 条件的子元素会被渲染,不符合条件的子元素不会生成对应的 Virtual DOM。这样可以避免不必要的性能消耗,提高页面渲染速度。

以上就是我对v-if和v-for哪个优先级更高的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。

Logo

前往低代码交流专区

更多推荐