前端经典面试题 | v-if/v-show的原理及区别

🖥️ 前端经典面试题专栏：前端经典面试题 v-if/v-show的原理及区别
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、回答点

二、深入回答

v-if/v-show的原理

v-if和v-show的区别

---

一、回答点

v-if / v-show的主要区别 | 原理 了解的话 可以说

二、深入回答

v-if/v-show的原理

• v-if会调用addIfCondition方法,生成VNode的时候会自动忽略相对应的节点,render的时候就不会进行渲染.
• v-show会生成VNode ,render的时候也会渲染成为真实的节点,只是在render的过程中会在节点的属性中去修改show的值(就是display)

拓展点:v-html

• v-html会先移除节点下的所有节点,并调用html方法,通过addProp添加innerHTML属性.(简单可理解为 设置innerHTML为v-html的值)

v-if和v-show的区别

• v-if是动态的向DOM树中添加/删除DOM元素; v-show是通过设置 display样式属性控制显示隐藏.
• v-if切换有一个 编译和卸载的过程,切换过程中销毁和重构内部的事件监听和其子组件; v-show只是基于css的切换
• v-if是惰性的,如初始条件为false,则什么都不做;只有在条件为true时才开始编译;v-show则是再任何情况下,无论为true或false都被编译,然后被缓存,并且DM元素v会保留.
• 在性能消耗方面,v-if有着更高的切换消耗; 而v-show有着更高的初始时渲染消耗;
• v-show适合对其频繁的切换,而使用v-show | 其他情况都可以使用v-if(更适合 不经常改变的地方)