Vueカスタムディレクティブの詳細

1. 背景

最近、就職面接を受けたのですが、面接官からカスタムディレクティブについて質問されました。カスタムディレクティブはあまり使わないので、公式ドキュメントを読んだだけで、ディレクティブをカスタマイズするにはVue.directiveを使う必要があることは大体わかりました。面接後、すぐにオンラインでカスタムディレクティブに関する情報を探したところ、カスタムディレクティブについて学ぶべきことがまだまだたくさんあることがわかったので、それを記録するとともに、もっと挑戦して学ぼうという気持ちを奮い立たせるためにブログを書こうと思いました。！！

これはカスタム命令に関する公式ドキュメントモジュールです。カスタム命令には、グローバルカスタム命令とローカルカスタム命令が含まれます。

2. ローカルカスタム指示

ローカルディレクティブを登録する場合、コンポーネントはdirectivesオプションも受け入れます。

@成分（{
  名前: "CustomDirectives",
  コンポーネント: {},
  ディレクティブ: {
    // ローカルカスタムディレクティブ custom1: {
      挿入(el) {
        console.log("el", el);
        el.style.position = "絶対";
        el.style.top = "50%";
        el.style.left = "50%";
        el.style.transform = "translate(-50%,-50%)";
        el.innerText = "読み込み中...";
        el.style.padding = "10px";
        el.style.color = "#333";
      },
    },
  },
})

3. グローバルカスタム指示

Vue.directive("custom2", {
  挿入(el, バインディング) {
    console.log("バインディング", バインディング);
    if (バインディング && バインディング値) {
      el.innerText = "グローバルカスタム命令をテストします";
      console.log("el", el);
      el.style.position = "絶対";
      el.style.top = "50%";
      el.style.left = "50%";
      el.style.transform = "translate(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});

4.1 カスタムコマンドフック関数

bind : ディレクティブが要素に最初にバインドされるときに 1 回だけ呼び出されます。ここで、1 回限りの初期化セットアップを実行できます。
inserted : バインドされた要素が親ノードに挿入されたときに呼び出されます (親ノードが存在することは保証されますが、必ずしもドキュメントに挿入されているとは限りません)。
update : コンポーネントのVNodeが更新されたときに呼び出されますが、その子VNodeが更新される前に発生することもあります。命令の値は変更されている場合と変更されていない場合があります。ただし、更新前と更新後の値を比較することで、不要なテンプレートの更新を無視することができます (詳細なフック関数のパラメータについては以下を参照してください)。
componentUpdated : 命令が配置されているコンポーネントの VNode とその子 VNode がすべて更新された後に呼び出されます。
unbind : ディレクティブが要素からアンバインドされたときに 1 回だけ呼び出されます。

4.2 フック関数のパラメータ

el : 命令がバインドされる要素。これを使用して DOM を直接操作できます。
binding : オブジェクト、

次のプロパティが含まれます:

name : v- プレフィックスを除いたディレクティブの名前。
value : ディレクティブのバインディング値。たとえば、v-my-directive="1 + 1" の場合、バインディング値は 2 です。
oldValue : ディレクティブバインディングの前の値。update フックと componentUpdated フックでのみ使用できます。値が変更されたかどうかに関係なく使用できます。
expression : 文字列形式のディレクティブ式。たとえば、v-my-directive="1 + 1" の場合、式は "1 + 1" になります。
arg : コマンドに渡されるパラメータ（オプション）。たとえば、v-my-directive:foo の場合、パラメーターは "foo" です。
modifiers : 修飾子を含むオブジェクト。たとえば、v-my-directive.foo.bar では、修飾子オブジェクトは { foo: true, bar: true } です。
vnode : Vue コンパイルによって生成される仮想ノード。詳細については、VNode API を参照してください。
oldVnode : 以前の仮想ノード。update フックとcomponentUpdatedフックでのみ使用できます。

4.3 動的命令パラメータ伝送

Vue.directive("custom2", {
  挿入(el, バインディング) {
    console.log("バインディング", バインディング);
    if (バインディング && バインディング値) {
      el.innerText = "グローバルカスタム命令をテストします";
      console.log("el", el);
      el.style.position = "絶対";
      el.style.top = "50%";
      const arg = (any としてバインド).arg;
      el.style[arg] = "50%";
      el.style.transform = "translate(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});


 <div v-custom2:[direction]="true"></div>
 
  プライベート方向 = '左';

5. 拡張

カスタム指示について質問した後、面接官は、通常どのようなデフォルトの指示を使用するかを尋ねました。
私は、 v-for v-if v-show v-modelなどと答えました。次に、v-for と v-if を同時に使用できるかどうかという疑問が生じました。私は、いいえ、同時に使用するとパフォーマンスの問題が生じますと答えました。
Q: パフォーマンスの問題が発生するのはなぜですか?
私はこう答えました: 毎回配列全体を走査する必要がある場合、特に小さな部分だけをレンダリングする必要がある場合は、速度に影響します。
Q: v-for と v-if を一緒に使用しないようにするにはどうすればよいですか?
私：？ ? ? このような状況は職場ではあまり遭遇しません。一般的に、v-if はトラバーサルループ内に置かれます (実際、パフォーマンスの問題は依然として残っています)
インタビュー後、いくつかの情報を調べたところ、 v-forとv-if一緒に使用すべきではなく、必要に応じてcomputedプロパティに置き換える必要があることがわかりました。

これで、Vue カスタム手順に関する詳細な記事は終了です。より関連性の高い Vue カスタム手順については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: