Vue2 と比較した Vue3 の進歩: より柔軟なカスタム命令

Vue2 と比較した Vue3 の進歩: より柔軟なカスタム命令

フロントエンド テクノロジの継続的な開発に伴い、Vue.js は人気のある JavaScript フレームワークとして、開発者のニーズを満たす新しいバージョンをリリースし続けています。 。 Vue2 に対する Vue3 の改良点の 1 つは、カスタム命令でより柔軟な機能が提供されることです。この記事では、Vue3 の新機能とコード例を紹介する形で、この改善について詳しく説明します。

Vue2 では、グローバル登録またはローカル登録を通じてカスタム ディレクティブが作成および使用されます。カスタム命令を作成するプロセスは比較的単純ですが、一部の複雑なシナリオではニーズを満たすのが困難です。 Vue3 は、app.directive メソッドを使用して、カスタム ディレクティブの詳細な制御を実装します。

まず、Vue2 の簡単なカスタム命令の例を見てみましょう:

<template>
  <div>
    <input v-focus />
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }
}
</script>

この例では、命令 v-focus をカスタマイズしました。 DOM に挿入されると、自動的にフォーカスが取得されます。 Vue2 では、ディレクティブは directives オプションを通じてグローバルに登録されます。

Vue3 では、app.directive メソッドを通じてカスタム命令を作成および登録できます。次に、Vue3 のカスタム ディレクティブを使用する例を示します。

<template>
  <div>
    <input v-focus />
  </div>
</template>

<script>
import { createApp } from 'vue'

const app = createApp()

app.directive('focus', {
  beforeMount(el) {
    el.focus()
  }
})

export default {
  mounted() {
    app.mount('#app')
  }
}
</script>

Vue3 では、app.directive メソッドを使用してカスタム ディレクティブを作成し、beforeMount## に追加します。 #フックで定義されたディレクティブの動作。上の例では、app.mount('#app') を通じて、指定された DOM に Vue アプリケーションをマウントします。

カスタム命令を登録するためのより柔軟な方法に加えて、Vue3 では、開発者が命令のライフサイクルをより適切に制御できるように、命令フック関数のオプションも提供しています。 Vue3 で使用できるコマンド フック関数は次のとおりです:

• beforeMount: 要素が DOM にマウントされる前に呼び出されます。 Mounted : 要素が DOM にマウントされた後に呼び出されます;
• beforeUpdate: 要素が更新される前に呼び出されます;
• updated:要素が更新された後に呼び出されます;
• beforeUnmount: 要素が DOM からアンマウントされる前に呼び出されます;
• unmounted: 要素が DOM からアンマウントされた後に呼び出されますDOM からアンマウントされます。
• これらのフック関数を通じて、カスタム命令の動作をより適切に制御できます。
要約すると、Vue3 は Vue2 と比較して、カスタム命令でより柔軟な機能を提供します。

app.directive

メソッドとその他の命令フック関数を使用することで、命令のライフサイクルをより適切に制御し、より複雑なシナリオのニーズを満たすことができます。したがって、Vue を使用してプロジェクトを開発するときに、より柔軟なカスタム命令が必要な場合は、Vue3 にアップグレードしてこれらの強力な機能を体験することを検討できます。

以上がVue2 と比較した Vue3 の進歩: より柔軟なカスタム命令の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。