Ausführliche Erklärung: Der Unterschied zwischen V-IF und V-Show von Vue

Die umfassendste Analyse des Unterschieds zwischen v-if und v-show im Vue-Projekt

Manchmal ist es notwendig, das „bedingte Rendering“ im Vue-Projekt zu steuern, und meistens wird es durch v-if oder v-show gesteuert. Ich denke, viele Leute kennen den Unterschied zwischen den beiden, aber kürzlich habe ich festgestellt, dass es einen gibt Viele Projekte im Projektteam Genossen können es nicht herausfinden, fast alle verwenden es wahllos, und wenn etwas schief geht, können sie immer noch nicht herausfinden, wo das Problem liegt. Lassen Sie uns nun kurz über den Unterschied zwischen diesen beiden Dingen sprechen.

1. Funktionsunterschied

Beide können das Ein- und Ausblenden steuern, aber im Wesentlichen gibt es große Unterschiede:

1.1 v-show
   v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一, 把HTML元素先渲染起来,符合条件就显示,不符合条件display就为none,不显示,但是元素还在那。。
1.2 v-if
   v-if是真正意义上的“条件渲染”。浏览器先判断符不符合条件,符合了再渲染, 否则不渲染DOM,浏览器中找不到这个DOM

Zweitens der Unterschied zwischen dem Vue-Lebenszyklus

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

3. Leistungsunterschied

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只会初始化渲染时候执行,再切换时候不会执行生命后期的过程

Wenn es für Sie hilfreich ist, denken Sie daran, es zu liken und zu folgen, vielen Dank!

Acho que você gosta

Origin blog.csdn.net/weixin_45449504/article/details/109486972
Recomendado
Clasificación