Директива v-show в Vue.js

Что делает эта директива? И зачем она по сути, если в vue есть директива v-if, она же по сути делает то же самое что и v-show?

Эта директива так же как и директива v-if предоставляет возможность условно отображать элементы, то есть при определенном условии показывать элемент, и точно так же при не соблюдении этого условия скрывать элемент. Вот пример работы данной директивы:

var vm = new Vue({
el:"#block",
data: {
choose:'false'
}
})

В первом блоке создаем объект vue, по id прикрепляем его к блоку html, далее задаем свойство choose при изменении значения которого мы будем отображать или скрывать определенные блоки.

<div id="block">
<p
v-if="choose=='true'">Here it is:
<p
v-else>Here is invisible block:

<div
v-show="choose=='true'">Here i am!!!!!!!

<button
id="yes" @click="choose='true'">Show
<button
id="no" @click="choose='false'">Dont show

В html с помощью директивы v-if создаем блок который будет выводиться только при условии что значение choose равно строковому значению ‘true’, так же сразу задаем v-else, альтернативую ветку, то же самое делаем в директиве v-show, далее создаем две кнопки, одна задает choose значение ‘true’ другая ‘false’. Разница насколько знаю в том что v-show прячеться при помощи display:none, а v-if вообще убираеться из DOM и его даже в панели разработчика не видно, в то время как блок с директивой v-show видно, и ему вполне можно поменять значение display обратно)