Vue v-for、v-if、v-show常见问题

vue使用v-for遍历对象时，是按照什么顺序遍历的？如何保证顺序？

会先判断对象是否存在iterator接口，如果有循环执行next()方法。

没有iterator的情况下，会调用Object.Keys()方法，在不同的浏览器中，js引擎不能保证输出的顺序是一致的。

如果想要保证输出的顺序一致，可以将对象放进数组中，作为数组的元素。

v-if和v-for同时出现的优先级问题？

v-for的优先级比v-if高。所以同时出现的时候，先给v-for套一层template作为父级元素，再在父级元素进行v-if判断

<template v-if>

    <div v-for></div>

<template>

v-if和v-for同时使用在同一个标签上的表现？

当v-if与v-for一起使用时，v-for具有比v-if更高的优先级，这意味着v-if将分别重复运行于每个v-for循环中。

所以，不推荐v-if和v-for同时使用。如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去

v-show 与 v-if 有什么区别？

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

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

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。