Vue中v-show和v-if的区别
2020-04-03 本文已影响0人
瑟闻风倾
vue动态显示DOM元素常用两种方式：v-show 和 v-if，但这两种是有区别的。
| 区别 | v-if | v-show | 备注 |
|---|---|---|---|
| 实现方式 | 动态地向DOM树内添加或者删除DOM元素 | 设置DOM元素的display样式属性来控制显隐(display="none") | - |
| 编译过程 | 切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件) | 控制css进行切换 | - |
| 编译条件 | 初始值为false就不编译；只有在第一次条件变为真时才开始局部编译 | 在任何条件下（首次条件是否为真）都被编译 | - |
| 性能消耗 | 不停的销毁和创建 | 只编译一次，保留DOM元素，之后通过控制css来控制显隐 | v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低（v-show性能更好一点） |
| 使用场景 | 适合条件不大可能改变 | 适合频繁切换 | v-if更灵活 |
