v-if和v-for谁的优先级更高

Posted 2023-03-20

参考技术A 渲染函数如下

_c 创建元素的虚拟节点
_v 创建文本的虚拟节点
_s JSON.stringify
_l 是循环list的函数， item.show 在每循环执行的函数中判断是否创建虚拟dom

渲染函数如下

他会先判断 vm.show ，再去循环列表

所以 v-for 比 v-if 的优先级更高，（源码在处理AST的时候，会先处理for,在处理if）

如何规避，在外层套个 template ,在 template 这层做 v-if 判断，
如果是根据数据中的字段去判断是否显示，可以用计算属性先过滤掉影藏的数据再去 v-for 循环数据

vue的一些小记录

1.在一个标签中，不推荐v-for 与 v-if 同时用

//当 v-if 与 v-for，v-for 具有比 v-if 更高的优先级。

//当它们处于同一节点（同一标签 一起使用时），v-for 的优先级比 v-if 更高，

这意味着 v-if 将分别重复运行于每个 v-for 循环中。

当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

 

 

2.watch监听路由参数的变化不会再执行created()//即是不会刷新页面

例如：http://xiaoshuo.com/page=1,改变为http://xiaoshuo.com/page=2时,页面不会刷新

 

3.v-if 和 v-show的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，是否显示。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 

参考：

https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show