5有用なVuejsのヒントあなたの建築経験を向上させる

著者Nwose Lotanna Victor
今日のポストでは、我々はより効率的なVue JSアプリケーションを構築するためにあなたのWeb開発の旅のお手伝いをするいくつかのヒントを学びます.

読み込み可能な命名規則を使用する

これは以前に聞いたことがあるかもしれませんが、読みやすさは、特にコラボレーションや他の人々と働くプロジェクトのために特に重要です.ここではベストプラクティスと見なされるいくつかの提案があります.

コンポーネントを命名しながらpascalcaseを使用する

新しいコンポーネント.Vue✅

新しいコンポーネント.Vue🛑

新しいコンポーネント.Vue🛑

あなたがそれらを読むことができる方法で子供たちと名前親コンポーネント.

フーセクション.VEE

FooterSectionHeading.VEE

footersectionicon.VEE

FooterSectionButton.VEE

また、「接頭辞」でDOM木の子供なしで命名を試みることもできます.

thenavbar.VEE

全体のアイデアは、読みやすく、また、最も重要なことは、使用するように選択したどんなコンベンションと一貫性を維持することを確認します.

プロップデータ型の検証

Propsは基本的に、親コンポーネントからその子にデータを渡すためのプラットフォームを提供します.しかし、Vueのpropsを作成するとき、明示的にデータ型を指定することが重要です.

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function
}

これはVueドキュメントの例ですが、ドキュメント内でチェックアウトできる独自のカスタムバリデーションを作成する方法もあります.

DOMを直接操作しない

CSS、HTML、およびJSの背景から来て、それはまだDOMと直接働いている間Vueアプリを構築するのは簡単ですが、これは悪いことではありませんが、Vueは、コンパイルをより効率的に発生するDOMの抽象化されたバージョンである仮想DOMを使用していることに注意することは非常に重要であり、すべての変更でDOM全体を再レンダリングすることを回避します.DOM APIがあまり頻繁に呼ばれないので、それだけが効率と資源管理を大いに改善します.
つまり、Vueコンポーネントでこのようなことをする必要はないということです.

<input type="checkbox" @change="logStatus" />

この入力は、サービス技術者が電気ボード上で働く間、電源の状態を記録するために使用される.

methods: {
  logStatus() {
    const isOn = document.getElementById('thecheckbox').checked;
    if( isOn ) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
  }
}

GetElement呼び出しがDOM API呼び出しであるのを見ることができます、そして、あなたが代わりにこの方法で接近するならば、これは簡単により効率的にされることができます.

data() {
  return {
    isOn = false
  }
},
methods: {
  logStatus() {
    if(this.isOn) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
    this.isOn = !this.isOn;
  }
}

これは同じ結果を達成し、あなたも簡単にDOM APIに到達することなく見ることができる状態を切り替えることができます.あなたが純粋なJSでできることは何でも、チャンスが仮想DOMでそれをするより効率的な方法がある、そして、あなたがそれを見つけることができないならば、check out Vue Refs.

包含プロパティ

計算されたプロパティは、別の本当に重要なVue JSツールが必要です、彼らは値やプロパティを別の値やプロパティにバインドされて記述するために使用する計算です.VueのJSは、あなたがそれをしたいときにDOMを更新するために可能な最も効率的な方法でデータの変更を処理するために使用します.
良いユースケースは、リストまたは配列を介してフィルタリングされます、あなたはリストにいくつかの100台の車とそのメーカーの国の情報を持って想像し、それらのドイツ語は知りたいです.

<div v-for=’car in cars’ v-if=’car.country =="Germany"' >

V-forをリストにループするために使用することができます.一部の人々は、条件やフィルタリングを行うために上記のようにV-ifを使用します.しかし、Vueのコンパイラはv-for以上のv-ifを優先するので、あなたの望む結果はあなたが得るものではないかもしれません、そして、リスト(それは100万のアイテムを持っていると想像します)は毎回、ループされるでしょう.あなたが既に言うことができるようにこれは効率的ではないすべての場合、これはあなたのためによく動作するように計算されたプロパティを使用することができます.

<div v-for='car in counteryFilter'>
//....
computed: {
  countryFilter: () => {
    return this.cars.filter(function (car) {
      return car.country =="Germany"
    })
  }
}

この方法では、このフィルタリングを行い、ループがより効率的になり、計算されたプロパティも一度チェックされ、依存関係の変更があれば再度チェックされます.最後に、それは私たちのコードがクリーンで読みやすいように、テンプレートのセクションからロジックをもたらします.

ヴュー

これは非常に興味深いものです、はい、あなたは正しくVue Cliがあなたが知らないかもしれないGUIツールを持っていると読んでください.端末に入り、以下のコマンドを入力します.

vue ui

Vue - jsがすでにマシン上でグローバルにインストールされている場合、このコマンドはデフォルトのブラウザをlocalhost:8000で開きます

いつでも好きなときにポートをkillすることができます.ホームボタンをクリックすると、新しいプロジェクトを作成するか、CLIコマンドなしで既存のプロジェクトを開くことができます.

あなたはすべてのプロンプトを通過することができます、新しいVueプロジェクトを作成するためにCLIを得る正確なプロンプト.プラグインをクリックすると、Vueプラグインプロジェクトの種類が表示されます.Vueによって既存のプラグインと提案がプロジェクトによって異なります.プラグインを1クリックでインストールできます.

依存関係や設定を追加することができます.あなたは、devサーバーであなたのアプリを提供することができますそれをテストしたり、生産のためにそれを構築する.

それはこのような強力なツールであり、非常に初心者に適しているので、自分自身をチェックしてください.

オープンソースセッション

VEEJSアプリケーションの生産におけるデバッグは、挑戦的で、時間がかかるかもしれません.OpenReplayは、フルストーリー、ログオンとhotjarへのオープンソース代替です.それはあなたが監視し、すべてのユーザーが再生し、どのようにすべての問題のためにあなたのアプリの行動を示す再生することができます.
それはあなたのユーザーの肩を見ながら、ブラウザの検査官を開いているようなものだ.
OpenReplayは現在利用可能なオープンソースの代替手段です.

現代のフロントエンドチームのためのハッピーデバッギング.

無料であなたのWebアプリを監視開始 余分な先端

Vue JS docsはVueに関連した何かを学ぶための最良のリソースの1つです、チームはそれが理解しやすいことを確認して、あなたのワークフローで実行することを確認するの例外的な仕事をしています.
あなたが間違いなく必要がありますVueドキュメント内の非常に広範なスタイルガイドもあります.

チェックアウト 結論

これらはいくつかのVueのJSのヒントを高速に構築するために使用するには、Vueのjsでクリーナーでより効率的なコードを書く.追加のボーナスはVSコードを使用して、あなたは速度、自動完了、および自動正しいサービスを使用してワークフローを支援するためにきれいな、vetur、およびVue対コードスニペットのようないくつかの拡張をインストールすることができます.
これらのどれが既に使用していますか?