本文共 840 字,大约阅读时间需要 2 分钟。
(1) v-if 的原理是根据判断条件来动态的进行增删DOM元素,只有v-if的值为true时,元素才会存在于html页面中;
v-show是根据判断条件来动态的进行显示和隐藏元素,是通过修改DOM元素的display属性来实现的,无论v-show的值为true或者false,元素都会存在于html页面中。(2) 只有v-if能和v-else连用进行分支判断,v-show是不能和v-else连用的,如果出现多种条件场景的情况下,可以使用v-if来进行判断
(3) 如果需要非常频繁地切换,使用v-show比较好,如果在运行时条件不会改变时,用v-if比较好
应用场景:频繁的进行增删DOM操作会影响页面加载速度和性能,由此:
v-if - 初始渲染:
初始值为 false 组件不会渲染,生命周期钩子不会执行,v-if 的渲染是惰性的。
初始值为 true 时,组件会进行渲染,并依次执行 beforeCreate,created,beforeMount,mounted 钩子。v-if - 切换:
false => true:依次执行 beforeCreate, created, beforeMount, mounted 钩子。
true => false:依次执行 beforeDestroy, destroyed 钩子。v-show - 渲染:
无论初始状态,组件都会渲染,依次执行 beforeCreate, created, beforeMount, mounted 钩子,v-show 的渲染是非惰性的。
v-show - 切换:
对生命周期钩子无影响,切换时组件始终保持在 mounted 钩子。
转载地址:http://ciuvi.baihongyu.com/