What and why is v-if vs v-show vs computed better?

Question

Vue.js

<em class='  fa-2x'
                :class='this.isSending ? "fa fa-spinner fa-spin" : "fas fa-check"'
            ></em>

You can stick 2 elements

<em class='  fa-2x fa fa-spinner fa-spin'
                 v-show / if ="'this.isSending"
            ></em>
            <em class='  fa-2x fa fa-spinner fa-spin'
                 v-show / if ="'!this.isSending"
            ></em>

In the case of IF, the VDOM will be updated each time, the old element is added and removed.
In the case of SHOW, the element will be updated, the display class will be added.
In the case of COMPUTED, just another class will be set.
Naturally, all options change the house, but the selection criteria for what to use
1 - which of the operations is the least expensive and fastest?
2 - in the case of large components, v-if can heavily load the user's device, but the first load will be faster as in the case of v-show, what approach do you use and when, why?

Answer 1

In the case of IF, the VDOM will be updated each time, the old element is added and removed.

No. The element will be reused, only the class will be updated. Vue is smart.

In the case of SHOW, the element will be updated, the display class will be added

No, in the case of c v-showthere will be 2 elements on the page, one of which is c . Moreover, all calculations and dom constructions will be carried out, of course, for both.display: none.

In the case of COMPUTED, just another class will be exposed.

Yes.
Should be used computed. It not only updates only the class, but also caches it if the changes are not needed. But in principle, a simple workout is not particularly worse, the difference is negligible.