vue渲染时闪烁{{}}的问题及解决方法

v-if和v-show可能是日常开发中最常用的两个指令，虽然看上去两者功能是类似的，但是两者还是存在很大区别的。

 v-if与v-show区别：

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

简单来说二者最大的区别是v-if只会在满足条件时才会编译，而v-show不管是否满足条件始终会编译，v-show的显示与隐藏只是简单的切换CSS的display属性。

 适用场景：

明白了二者的本质区别后什么时候适合用v-if什么时候用v-show也变得简单了。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

比如说现在很多页面在不同端表现是不同的，最常见的是很多的APP页面在微信端打开时页面上会显示下载的提示，而在APP内部则不会，像这样的情况每个端的状态在加载时就是确定的不会变的就适合用v-if，这样在APP内打开时显示下载的部分直接就不会编译。

而像页面上元素根据不同条件显示/隐藏这样的地方用v-show是最合适的了，因为像这种基本上两个状态要频繁切换，如上面所说，v-show的切换消耗是小于v-if的。

 多条件

很多时候代码中需要多条件判断，但是vue中只有v-if和v-else，没有v-elseif这样的指令。虽然没有类似的指令，但依旧还是有几种方法可以解决这个问题。

 方法一:template

<div v-if="xxx"></div><template v-else><div v-if="yyy"></div><div v-else></div></template>

 方法二：partical

元素是已注册的 partial 的插槽，partial 在插入时被 Vue 编译。 元素本身会被替换。 元素需要指定 name 特性。

这货让人想起javaScript原生的fragement元素，但却不是一个东西。partial有静态和动态之分，而要解决上面的问题就要用到动态partial。

示例：

// 注册 partialVue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')<!-- 静态 partial --><partial name="my-partial"></partial><!-- 动态 partial --><!-- 渲染 partial，id === vm.partialId --><partial v-bind:name="partialId"></partial>

要解决多个条件的问题，我们就可以为每种情况预先注册好各自的partial，然后将partial的name属性绑定到判断条件，这样就能实现多个条件判断。