より良い VueJS 開発者になるための 10 のヒントとコツ

序章

私は VueJS で作業するのが大好きで、フレームワークで作業するたびに、その機能と機能を深く掘り下げることを楽しんでいます.この投稿では、まだ気付いていないかもしれない 10 のクールなヒントとコツを紹介し、より良い Vue 開発者になるのを手助けしようとします.

美しくなったスロット構文

Vue 2.6 のロールアウトに伴い、イベント (v-on:click イベントの @click など) またはバインディングのコロン表記 (:src) のように使用できる、スロットの簡略表記が導入されました.たとえば、Table-Component がある場合、この機能を次のように使用できます.

<template>
  ...
  <my-table>
    <template #row="{ item }">
      /* some content here. You can freely use 'item' here */
    </template>
  </my-table>
  ...
</template>

$on(‘フック:’)

これは、作成またはマウントされたフックでカスタム イベント リスナーまたはサード パーティのプラグインを定義し、メモリ リークを引き起こさないようにするために beforeDestroy フックでそれを削除する必要がある場合に使用できる便利な機能です. $on(‘hook:’) メソッドを使用すると、2 つではなく 1 つのライフサイクル メソッドでイベントの定義/削除を使用できます.

mounted() {
 const aThirdPartyPlugin = aThirdPartyPlugin()
 this.$on('hook:beforeDestroy', () => {
  aThirdPartyPlugin.destroy()
 })
}

プロップの検証

小道具が String、Number、さらには Object などのプリミティブであることを検証できることは、おそらくすでにご存じでしょう.ただし、たとえば、文字列のリストに対して検証する場合は、カスタム バリデータを使用することもできます.

alertType: {
 validator: value => ['signup', 'login', 'logout'].includes(value)
}

動的ディレクティブ引数

Vue 2.6 の最もクールな機能の 1 つは、ディレクティブ引数をコンポーネントに動的に渡すことができることです. Button-Component があり、場合によっては Click-Event をリッスンし、他の場合は DoubleClick-Event をリッスンしたいとします.そこで、これらのディレクティブが役に立ちます.

<template>
  ...
  <aButton @[someEvent]="handleSomeEvent()"/>
  ...
</template>

<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dblclick"
    }
  },

  methods:{
    handleSomeEvent(){
      // handle some event
    }
  }
  ...
</script>

そして、本当に素晴らしいことも --> 同じパターンを動的な HTML 属性、小道具などに適用できます!

同じルートのコンポーネントを再利用する

いくつかのコンポーネントを共有する異なるルートがある場合があります.これらのルートを切り替えると、デフォルトでは共有コンポーネントは再レンダリングされません.これは、Vue がパフォーマンス上の理由でそのコンポーネントを再利用しているためです.しかし、とにかくこれらのコンポーネントを再レンダリングしたい場合は、Router-View-Component に :key prop を提供することで実現できます.

<template>
 <router-view :key="$route.fullPath"></router-view>
</template>

親から子へのすべての小道具

これは、親コンポーネントから子コンポーネントに allprops を渡すことができる非常に優れた機能です.これは、別のコンポーネント用の Wrapper-Component がある場合に特に便利です.したがって、すべての小道具を 1 つずつ渡す代わりに、これを利用してすべての小道具を一度に渡すことができます.

<template>
  <childComponent v-bind="$props"/>
</template>

それ以外の:

<template>
  <childComponent  :prop1="prop1"
                   :prop2="prop2"
                   :prop3="prop3"
                   :prop4="prop4"
                   ...
  />
</template>

親から子へのすべてのイベントリスナー

親コンポーネントのルートにない子コンポーネントがある場合、次のように親から子にすべてのイベント リスナーを渡すことができます.

<template>
  <div>
    ...
    <childComponent v-on="$listeners"/>
    ...
  </div>
</template>

子コンポーネントが親のルートにある場合、デフォルトでそれらを取得するため、この小さなトリックは必要ありません.

$createElement

各 Vue-Instance は、デフォルトで、仮想ノードを作成して返す $createElement メソッドへのアクセス権を持っています.これは、たとえば、v-html ディレクティブを介して渡すことができるメソッドでマークアップを使用するために利用できます.機能コンポーネントでは、このメソッドはレンダリング関数の最初のパラメーターとしてアクセスできます.

JSX の使用

Vue CLI 3 以降、デフォルトで JSX の使用がサポートされているため、必要に応じて (そしておそらく React から) JSX でコードを記述できるようになりました.これは、機能コンポーネントを記述する場合などに便利です.まだ Vue CLI 3 を使用していない場合は、babel-plugin-transform-vue-jsx を使用して JSX をサポートできます.

カスタム v モデル

V-model はデフォルトで、@input イベントリスナーと :value props に対する構文糖衣と呼ばれるものです.しかし、Vue-Component で「モデル」プロパティを指定して、使用するイベントと値のプロップを定義できます.

export default: {
 model: {
  event: 'change',
  prop: 'checked'
 }
}

結論

より良い VueJs 開発者になるためのヒントを提供できれば幸いです.反応開発にも興味がある場合は、私の投稿をチェックしてください.お気軽にコメントを残して、今後の投稿をフォローしてください!