v-if&v-show
- 区别
- 展示形式不同 v-if是 创建一个dom节点 V-show 是 display:none / block
- 使用场景不同 初次加载 v-if 要 比v-show 好，页面不会做加载盒子 频繁切换 v-show 要比 v-if 好，创建和删除的开销太大了，显示和隐藏开销较小
- 优先级问题
源码中体现 >> v-for 比 if 比较高 - 一起使用
- 报错
4:11 error The 'arr' variable inside 'v-for' directive should be replaced with a c
- 影响性能
v-if条件不满足 >> 也会执行遍历 >> 性能差 - 怎么解决
v-if添加到外层盒子，不满足条件 >> 不执行渲染
代码演示:
function genElement (el, state) { if (el.parent) { el.pre = el.pre || el.parent.pre; } if (el.staticRoot && !el.staticProcessed) { return genStatic(el, state) } else if (el.once && !el.onceProcessed) { return genOnce(el, state) } else if (el.for && !el.forProcessed) { return genFor(el, state) } else if (el.if && !el.ifProcessed) { return genIf(el, state) } else if (el.tag === 'template' && !el.slotTarget && !state.pre) { return genChildren(el, state) || 'void 0' } else if (el.tag === 'slot') { return genSlot(el, state) } else { // component or element var code; if (el.component) { code = genComponent(el.component, el, state); } else { var data; if (!el.plain || (el.pre && state.maybeComponent(el))) { data = genData$2(el, state); } var children = el.inlineTemplate ? null : genChildren(el, state, true); code = "_c('" + (el.tag) + "'" + (data ? ("," + data) : '') + (children ? ("," + children) : '') + ")"; } // module transforms for (var i = 0; i < state.transforms.length; i++) { code = state.transforms[i](el, code); } return code } }
