v-show和v-if的区别

一、v-if:v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-show:v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

二、vue生命周期区别

    v-if是重新渲染,所以每次切换一次会重新走一次生命周期,v-show由于只是控制显示隐藏,所以除了初始化渲染,其他时候都不会再走相关生命周期了。

三、性能区别
1、v-if有更高的切换开销,v-show有更高的初始渲染开销。如果需要频繁的切换,使用v-show比较好,如果运行条件很少改变,使用v-if比较好。

2、v-show比v-if性能更高,因为v-show只能动态的改变样式,不需要增删DOM元素。所以当程序不是很大时候,v-if和v-show区别都不大,如果项目很大,推荐多用v-show,较少浏览器后期操作的性能。

3、需要多种条件场景,比如id=1,=2,=3.....时候,因为只有v-if,可以和v-else等连用,这种比较适合用v-if

4、v-show不支持<template>语法

5、v-if切换时候回实时的销毁和重建内部的事件、钩子函数等,v-show只会初始化渲染时候执行,再切换时候不会执行生命后期的过

 


版权声明:本文为m0_48729489原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。