Как во vue 3 написать свою реализацию v-if?

Question

[VladislavFisun]

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

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('auth', {
    beforeMount(el, binding, vnode) {
      const condition = binding.value;
      console.log(vnode);
      if (!condition) {
        vnode.el = [];
      }
    },
  });
});

upd: вообще возможно ли где-то посмотреть реализацию v-if в виде кода?

Comments

[WapSter]

Единственный случай если vue смонтирует элемент, это v-if=true изначально, а потом после mount или во время этого жизненного цикла условие внутри v-if меняются на false

[Aetae]

Нахрена? Какую проблему ты пытаешься этим решить? v-if - это внутренние, низкоуровневые, потроха. Это как если бы ты хотел сделать свою реализацию if в javascript. Да, ты можешь посмотреть реализацию в сырцах, нет, это ничем тебе не поможет.

P.S. Ты не должен трогать в параметрах прилетающих в директиву ничего кроме el, всё остальное - только для чтения.

Answer 1

[Сергей delphinpro]

а v-if на template?

<template v-if="cond">
  <div>  <!-- не будет смонтирован -->
  </div>
</template>

Comments

[VladislavFisun]

Этот вариант с моей директивой работает, но я хочу навешивать ее на любой тег, поэтому такой вариант не очень подходит