跳到主要内容

v-if 和 v-show 的区别

v-if 和 v-show 都是Vue 中经常用到的指令

相同点​

两者都是用来控制元素显示或隐藏的指令

区别​

  1. v-if 的显示掩藏是通过添加或删除元素实现的；v-show 的显示掩藏是通过修改元素的display属性实现的。
  2. 由于 v-if 会使 DOM 发生变化，所以 v-if 会触发 beforeUpdate 和 updated
  3. 如果 v-if 作用在子组件上，那么 v-if 从 false 变为 true 时，会触发子组件beforeCreate，created，beforeMount，mounted;从 true 变为 false 时，会触发子组件 beforeDestroy 和 destroyed
  4. v-show 的初始消耗会比较高，v-show 切换消耗比较高

使用场景​

如果需要非常频繁地切换，最好使用 v-show，如果不需要则使用 v-if

  • 都说操作 DOM 消耗大，现在又开始流行无虚拟 DOM，前端真是看不懂