Open 5Mi opened 8 years ago
注意 v-show 不支持<template>语法。
<template>
v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。 好像也不存在 v-else-if 这种指令(if elseif else)
将 v-show 用在组件上时，因为指令的优先级 v-else 会出现问题。因此不要这样做：
<custom-component v-show="condition"></custom-component> <p v-else>这可能也是一个组件</p>
用另一个 v-show 替换 v-else：
<custom-component v-show="condition"></custom-component> <p v-show="!condition">这可能也是一个组件</p>
这样就可以达到 v-if 的效果。
在切换 v-if块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
项目中发现通过v-if切换的模板块 在切换之后vm的 $data中的值会被重置,造成bug.现在来看 也就是因为v-if切换时局部编译/卸载过程 , 对条件块内的事件监听器和子组件 合适地销毁与重建造成的吧
注意 v-show 不支持
<template>语法。v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。 好像也不存在 v-else-if 这种指令(if elseif else)
将 v-show 用在组件上时，因为指令的优先级 v-else 会出现问题。因此不要这样做：
用另一个 v-show 替换 v-else：
这样就可以达到 v-if 的效果。
v-if vs. v-show
在切换
v-if块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
项目中发现通过v-if切换的模板块 在切换之后vm的 $data中的值会被重置,造成bug.现在来看 也就是因为v-if切换时局部编译/卸载过程 , 对条件块内的事件监听器和子组件 合适地销毁与重建造成的吧