2行以上のコードが存在する場合、インラインスクリプトをテンプレートに書き込むようにしないようにしてください

vscodeはテンプレート内のインラインスクリプトの構文エラーをチェックできません.したがって、インラインスクリプトをテンプレートに記述しないようにしてください.インラインスクリプトをテンプレートに書き込むと、メモ帳でコードを書くこととは異なりません.2つの欠点があります.

コードは構文エラーをチェックできません

あなたが使っているならばTypescript , VS Code あなたのための構文エラーを特定できます.これらの構文エラーを見つけることができると思うかもしれませんが、実際には、そうではありません.例えば、このコードでは、インラインスクリプトには2行のコードしかありません.

<div @click="alert('hello world'); doSomething();" />

偶数ハンドラは

doSomething(event: Event) {
   // do something ...
}

エラーはないVS Code . しかし、このコードを実行すると、event パラメータundefined .
あなたが線移動を抽出するならばconsole.log('do something'); doSomething(); ある方法にletsDoSomething()

letsDoSomething() {
    console.log('do something');
    this.doSomething();
}

次に、エラーが表示されます

それがわかるdoSomething が必要ですevent . さらに悪いことはインラインスクリプトがうまく動作しているようです.パラメータevent of doSomething 引数はundefined . 私たちはこのように欠陥をつくります.この例はダムに見えません.しかし、私が仕事で会った類似したケース.

コードをデバッグ中

インラインスクリプトは1行のJSコードでコンパイルされます.このコードをデバッグすることはできません.コンポーネントのメソッド/計算にコードを配置する場合.あなたはまだそれが既に解決されてもそれをデバッグすることができます.

エラーが発生した場合は、このコードをデバッグできます.何を知っているかはわからないe or n 変数はソースコードに基づいています.
あなたが生産でコードをデバッグすることができるならば、それがどれくらい便利かについて想像してください.それは本当に何度も私を助けます.したがって、インラインスクリプトコードをコンポーネントメソッド/計算に抽出しようとすると、それは最終的に役立つでしょう.

ウォッチャーを使わないようにしなさい

Vue.js documentation すでにウォッチャーを使用しないことを提案します.

なぜ?Watcherは暗黙の依存です.暗黙の依存関係は次の問題をもたらします.

論理はより散在し,それらの間には明確な相関はない.コードを理解することは難しい.トラブルシューティングの際に特に困難です.

ときに機能を更新すると、どこかのロジックが壊れていることに気づくことができなくなります.ちょうどこのロジックがウォッチャーによって引き起こされるから.

暗黙の依存関係によってもたらされる問題に加えてwatcher 自身の他の問題があります.

VUEが起動時にトリガされません.コンポーネントのレンダリングwatch デフォルトでは怠惰ですimmediate: true . それで、あなたがウォッチャーの若干の論理を予想するならばv-if 回すtrue , 失望しますよ.これに起因する欠陥を満たした.

ウォッチャーは一時停止できない.時々我々はウォッチャーを無効にしたくない、我々はただそれを一時停止したい.残念ながら、ウォッチャーは一時停止機能を提供しません.this comment ウォッチャーを一時停止する唯一の方法は、条件付きチェックを行うことです.だから私は旗を追加しましたwatcherEnabled フィルタを一時停止し、いくつかのシナリオでウォッチウォッチャーをソートします.しかし、このフラグはまた、いくつかの欠陥をもたらした.

ウォッチャーよりも5つのより良いアプローチがあります

子供から親へ

カスタムイベントを使用する

親コンポーネントのメソッドをトリガーする必要がある場合.使えますcustom event

子から親へのメソッドの移動

トリガするmetodが子メソッドである場合.代わりに$refs , メソッドを親コンポーネントに移動する方が良いでしょう.その後、直接呼び出すことができますまたはカスタムイベントを使用して

親から子へ

ref属性を使用する

トリガーするメソッドを親に移動できない場合.または、タスクをリファクタリングするリスクを取る必要はありません.使えますref attribute

しかし、それを覚えて$refs 良い練習ではないrefsも同様の問題があります.コンポーネント$refs is undefined コンポーネントがレンダリングされている場合.それで、あなたが使うならば$refs テンプレート内のそれは未定義です.あなたが使っているならば$refs にcomputed . The computed が壊れます.例えば、あるcomputed 子要素のscrollLeft属性を取得するには

get childScollLeft() {
    return this.$refs.child.scrollLeft;
}

このcomputed あなたが期待通りに働きません.なぜなら、計算された状態で監視したい変数が最初に定義されていないときには、この計算は反応しないからです.後も$refs 読み込みます.

小道具を使う

子コンポーネントUIを更新する場合.使えますprops

どこからでも

使用する

親/子/兄弟コンポーネントのUIを更新したい場合.あなたはVuexを使用することができます.唯一の欠点は、コードの複雑さを増すかもしれないということです.

3 . propsとして関数を渡さないようにしてください

Passing functions as props an anti-pattern in Vue.js . 本当に良い記事の文章があります.

As the application grows larger in size and other developers come on board, they will look at the child component code and have to figure out which callback function prop it is and where it is from.

それが私が2008年に会う問題ですmuse-v2 . 時々、私はこれらの方法がどこから来るかを理解する必要があります
イメージ: 13 .PNG
私は賛成です.しかし、これは私が小道具として機能を通過することを推奨しない主な理由ではありません.主な理由は、コードを読んでいるときに、このコンポーネントのコンテキストに慣れるための努力が必要です.関数がpropとして渡された場合、別のコンポーネントのコンテキストに慣れている必要があります.それがすべてであるならば、それはそれほど悪くありません.さらに悪いことに、メソッドを読み込むときに異なるコンポーネントコンテキストを切り替える必要があります.
お勧めcustom event 関数をpropsとして渡す代わりに.