戻る
Vueは、ユーザーインターフェイス構築のための急成長中のプログレッシブフレームワークです。GitHubで最も多くのスターを獲得したJavaScriptフレームワークとなり、同ポータルで2016年と2017年に最も高いスターを獲得したプロジェクトとなりました。
アプリケーションの作成 Vue しかし、質の高いアプリケーションを作りたいのであれば、もう少しチャレンジが必要だ。
一員であること The Codest チーム の真の支持者である。 Vueテクノロジーそこで、いくつか紹介したい。 ヒント (Vueの公式ドキュメントからコピーしたものではありません)。 コード 品質と Vueアプリケーションの性能.
すでに言われていることを繰り返したくはない。Vueのドキュメントにスタイルガイドがある：
Vue 2ドキュメント - スタイルガイド または
Vue 3ドキュメント - スタイルガイド
そこには4つのルールカテゴリーがある。私たちはそのうちの3つを本当に大切にしている：
エッセンシャル エラーを防ぐルールおすすめ そして 強く推奨 ベストプラクティスを維持するためのルール 品質向上 そしてコードの読みやすさ。と思うかもしれない！すべてのルールを覚えなければならないのか？"もちろんそんなことはありません。ESLintを使えばそのようなルールの面倒を見ることができます。ESLintの設定ファイルですべてを適切に設定するだけです。 を使用することをお勧めします。 おすすめ プリセット を使用すると、良いプラクティスでアプリを構築するのに役立つルールのセットを完全に無料で入手できます。設定方法は？
デフォルトでは 拡張 キーに置き換えてください。 "plugin:vue/essential" と "plugin:vue/推奨"それだけだ。
もちろん、ESLintだけですべてを処理することはできないので、覚えておくべきルールがいくつかあります。例えば
$_名前空間 プラグインやミックスインなどのプライベートプロパティ、条件付きで1つ以上の要素をレンダリングする必要がある場合もあるが、よくそういうことを書く人がいる：
内容
内容
内容もっとエレガントに書けるから必要ない：
<code> <template v-if="condition">
<div>内容</div>
<div>内容</div>
<div>内容</div>
</template>しかし、ルート要素としてそれを行いたい場合はどうだろうか？それは Vueを使うことはできない。 <テンプレート を使うことができる。場合によってはdivで包むだけで十分なこともある。
それでもいいのだが、htmlのセマンティックの関係で、要素をdivで囲むことができない場合がある。
(( item.name ))
...といったエラーが表示される：
私たちは次のように対処することができる。 JSXと機能コンポーネントを使用また、ブール値を渡せばv-ifを置き換える。
実は、これはコンポーネントでやってはいけないことの一例に過ぎない。コンポーネント・ロジックの中で局所的に必要なことを行うだけでよい。外部にある可能性のあるメソッドはすべて分離し、例えばビジネス・ロジックなどのコンポーネントの中だけで呼び出すようにする。
例
このような方法ではなく
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コンポーネント.このように、単一ファイルのコンポーネントを簡単にインポートすることができる：
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="リスナー".
作成された（あるいはマウントされた）フックに何らかのデータをフェッチすることはよくあるが、その場合、例えばページネーションの現在のページなど、プロパティが変更されるたびにそのデータをフェッチする必要がある。このように書く人もいる：
もちろん、それは機能するのだが、ベストなアプローチではない。では、どうすればリファクタリングできるのか、悪くないアプローチの例を見てみよう：
上のバージョンの方が優れているのは、別のメソッドは必要なく、watchedPropertyを変更するために呼び出されるべきメソッドに名前を付けただけだからだ。
さらに良い方法がある：
createdフックを取り除いた。immediate'オプションを追加することで、fetchDataメソッドのコンポーネント呼び出しを観測開始直後（createdフックの少し前、beforeCreatedの後）に行うので、createdフックの代わりに使うことができます。
これらのヒントは、あなたのアプリケーションを完璧にするものではありませんが、それらを使用することで、迅速になります。 コードの質を高める.また、上記の例から興味を引くものを見つけてほしい。
なお、この記事のために簡略化したものもある。
続きを読む
Japanese 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Korean 
Spanish 
Dutch 
Estonian 
Greek