美文网首页
v-if和v-show的性能比较

v-if和v-show的性能比较

作者: 黄黄黄大帅 | 来源:发表于2020-09-03 15:53 被阅读0次
实现本质方法区别

vue-show本质就是标签display设置为none,控制隐藏
vue-if是动态的向DOM树内添加或者删除DOM元素

编译的区别

v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件

v-show都会编译,初始值为false,只是将display设为none,但它也编译了
v-if初始值为false,就不会编译了

性能

v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。

相关文章

  • VUE 常问知识点

    1.v-if 和v-show区别 v-if 真正条件渲染 DOM切换 销毁 重建,不停的销毁和创建比较消耗性能。v...

  • v-if和v-show的区别

    v-if v-if的特点:每次都会重新删除或创建元素v-if的性能:有较高的切换性能消耗 v-show v-sho...

  • vue2.0基础(一、内部指令)

    指令 1、条件判断 v-if v-else v-show ### v-if 和v-show的区别: v-if:...

  • 2018-05-22 指令

    v-if && v-show && v-else v-if和v-show的区别:v-if 判断是否加载,如果时fa...

  • v-if和v-show的性能比较

    实现本质方法区别 vue-show本质就是标签display设置为none,控制隐藏vue-if是动态的向DOM树...

  • vuejs之v-show与v-if的区别

    1、性能差别: v-if 删除/添加页面的Dom元素,所v-if 有更高的切换消耗。 v-show切换...

  • vue(2)

    条件渲染 条件渲染指令 1)v-if 与 v-else 2)v-show 比较 v-if 与 v-show 3)如...

  • vue 题目问题

    vue项目性能优化 1>、利用v-if和v-show减少初始化渲染和切换渲染的性能开销2>、computed、wa...

  • VUE条件渲染

    条件渲染指令:v-if v-else v-show如果频繁切换 v-show比较好v-if v-else会干...

  • v-show v-if v-bind 和display

    一、v-show和v-if:v-show和v-if都可以控制元素的显示或隐藏,但是v-show是用display控...

网友评论

      本文标题:v-if和v-show的性能比较

      本文链接:https://www.haomeiwen.com/subject/ckcosktx.html