Vue.jsアプリの改善。実用的なヒント

 

   (( item.name ))
 

...といったエラーが表示される：

私たちは次のように対処することができる。 JSXと機能コンポーネントを使用また、ブール値を渡せばv-ifを置き換える。

</>

コンポーネントにAPIコール・ハンドラを書くな

実は、これはコンポーネントでやってはいけないことの一例に過ぎない。コンポーネント・ロジックの中で局所的に必要なことを行うだけでよい。外部にある可能性のあるメソッドはすべて分離し、例えばビジネス・ロジックなどのコンポーネントの中だけで呼び出すようにする。

例

このような方法ではなく

created() (
this.fetchArticles()；
)、
メソッド: (
 非同期fetchArticles() (
  try (
    const data = await axios.get(url)；
    this.articles = data.articles；
    ) catch (e) (
    // エラー処理
    )
  )
)

APIの結果を返す適切なメソッドを呼び出してください：

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll()；
   ) catch (e) (
     // エラーを処理する
   )
  )

大量の小道具の代わりにスロットを使う

プロップを使うだけで十分な場合もありますが、効率的でない場合もあります。それは、コンポーネントを思い通りに動作させるために、多くのpropsを追加しなければならない状況です。最も単純な例は、ボタンコンポーネントです。間違いなく、アプリケーションのどこでも使えるコンポーネントです。では、このようなボタンコンポーネントを考えてみましょう。

(( テキスト ))

この段階では、テキストプロップだけを受け付けるシンプルなコンポーネントだ。しかし、ボタンにはアイコンが必要なので、これでは不十分かもしれません。この場合、もう2つのプロップを追加する必要があります（2つというのは、テキストの前後に追加するオプションを持ちたいからです）。コンポーネントはこのようになります：

(( テキスト ))

プロップが3本しかないのは悪くないが...。

もしローディングインジケーターが必要なら？別のプロップを追加しなければならない。そして、それはすべての新機能に対してだ！コンポーネントの数の増加についていくのは大変だと思いますか？そうですね！

代わりにスロットを使おう.

もっと簡単でしょう？でも、アイコンの追加機能はどうやったら使えるの？とても簡単だ！このようにコンポーネントを使うだけだ：

バック

次へ

パフォーマンスを向上させる簡単な方法

簡単に実践できるヒントをいくつか紹介しよう。

遅延ロード・ルート

管理者だけが利用可能なルートや、特定のアクセス権を持つユーザーだけが利用可能なルートがあり、他のルートよりもアクセス数が少ないことがあります。これらは遅延ロードルートを使うのに最適なケースです。

コンポーネント・プロパティでarrow関数を使うだけで、インポート関数を返すことができます：

 export default new VueRouter (
   (
     mode: 'history'、
     routes：[
       (
         path: '/landing'、
         component: () => import('../pages/p-welcome')、
         name: 'welcome'
       ),
  ...

の代わりだ：

import PWelcome from '@/pages/p-welcome'；

エクスポート・デフォルト new VueRouter (
(
mode: 'history'、
routes：[
(
path: '/landing'、
component：PWelcome, //インポートされたコンポーネント
name: 'welcome'
),

Vueコンポーネントの遅延ロード

同じような状況は Vueコンポーネント.このように、単一ファイルのコンポーネントを簡単にインポートすることができる：

const lazyComponent = () => import('pathToComponent.vue')
エクスポート default (
コンポーネントを(lazyComponent )
)

// 別の構文
エクスポートデフォルト (
コンポーネント(
lazyComponent: () => import('pathToComponent.vue')
)
)

そのコンポーネントの遅延ロードのおかげで、要求されたときだけダウンロードされる。例えば、v-ifを持つコンポーネントがある場合、コンポーネントがレンダリングされる場合にのみ要求されます。つまり、v-ifの値がtrueでない限り、コンポーネントはロードされない。そのため、遅延インポートは JavaScript ファイル.

ボーナスだ： Vue CLI 3+を使用すると、遅延ロードされたすべてのリソースがデフォルトでプリフェッチされます！

属性プロップの代わりに透明なラッパーを使う

このようなコンポーネントを考えてみよう：

 <テンプレート
   
 </template

何の問題もなく、このように使うことができる：

または

なぜなら Vue を使うと、propsとして宣言していなくても、html属性をコンポーネントに渡すことができます。html属性はコンポーネントのルート要素（この場合はinput）に適用されます。

問題は、入力コンポーネントを拡張するときに現れる：

<code> <template>
   <div class="form-group">
     <label :for="id">(( ラベル ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>

さて、このようにコンポーネントを使う：

なぜなら、typeとplaceholderはdiv（ルート要素）に適用され、意味をなさないからです。というのも、型とプレースホルダはdiv（ルート要素）に適用されるからです。必要な小道具を追加しよう！」と最初に考えるかもしれませんし、もちろんそれはうまくいくでしょう。 タイプ, オートコンプリート, プレースホルダ, オートフォーカス, 使用不能, 入力モードなどと書くと、すべてのhtml属性に対してpropsを定義しなければなりません。私は個人的にこの長い方法が好きではないので、もっと良い方法を探そう！

我々は、この問題全体を たった2行だ。

<template>
  <div class="form-group">
    <label :for="id">(( ラベル ))</label>
    <!-- pay attention to v-bind="$attrs" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false, // <- pay attention to this line
  props: ['value', 'label', 'id']
);
</script>

を使うことができる。 v-bind="$attrs" に直接属性を渡します。 <入力 大量のプロップを宣言することなく。また、オプション inheritAttrs: false を使用して、ルート要素に属性を渡さないようにすることができます。この入力にイベントリスナーを追加する必要がある場合はどうでしょうか？ここでも、propsやカスタムイベントで処理することができますが、もっと良い解決策があります。

<template>
  <div class="form-group">
    <label :for="id">(( ラベル ))</label>
    <!-- pay attention to v-on="listeners" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      v-on="listeners"
    >
</div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false,
  props: ['value', 'label', 'id'],
  computed: (
    listeners() (
      return (
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      );
    )
  )
);
</script>

リスナー用のコンポーネントを返し、入力リスナーを追加する新しいcomputedプロパティがある。その計算された入力を使うには v-on="リスナー".

作成されたフックとウォッチャーを一緒に使うのではなく、即時オプションでウォッチャーを使う。

作成された（あるいはマウントされた）フックに何らかのデータをフェッチすることはよくあるが、その場合、例えばページネーションの現在のページなど、プロパティが変更されるたびにそのデータをフェッチする必要がある。このように書く人もいる：

<script>
export default (
  name: 'SomeComponent',
  watch: (
    someWatchedProperty() (
      this.fetchData();
    )
  ),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

もちろん、それは機能するのだが、ベストなアプローチではない。では、どうすればリファクタリングできるのか、悪くないアプローチの例を見てみよう：

<script>
export default (
name: 'SomeComponent',
watch: (
  someWatchedProperty: 'fetchData'
),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

上のバージョンの方が優れているのは、別のメソッドは必要なく、watchedPropertyを変更するために呼び出されるべきメソッドに名前を付けただけだからだ。

さらに良い方法がある：

<script>
  export default (
    name: 'SomeComponent',
    watch: (
      someWatchedProperty: (
        handler: 'fetchData',
        immediate: true
      )
    ),
    methods: (
      fetchData() (
        // handle fetch data
      )
    )
  );
</script>

createdフックを取り除いた。immediate'オプションを追加することで、fetchDataメソッドのコンポーネント呼び出しを観測開始直後（createdフックの少し前、beforeCreatedの後）に行うので、createdフックの代わりに使うことができます。

Vue.jsのヒントまとめ

これらのヒントは、あなたのアプリケーションを完璧にするものではありませんが、それらを使用することで、迅速になります。 コードの質を高める.また、上記の例から興味を引くものを見つけてほしい。

なお、この記事のために簡略化したものもある。

続きを読む

JavaScriptは完全に死んだインターネット上のある男

最も人気のあるReactフックをさらに深く見る

JavaScriptを使用できるソフトウェア・プロジェクト