The difference between v-if and v-show

<div v-if=""></div>
<div v-show=""></div>

Both v-if and v-show are displayed and hidden on the page, but there is an essential difference between the two.

v-ifWhen the value is true, the div is displayed. When the value is false, the element disappears and the code disappears, which is equivalent to deleting the code. When it is true, the page re-renders the div;

v-show The hidden control appears, but the css property is set to display: none or block;

v-ifThere is a higher switching consumption, which is not suitable for frequent switching;
v-showthere is a higher initial rendering consumption, which is suitable for frequent switching;