【浅談】vueのコンポーネント化

【浅談】vueのコンポーネント化
【推奨】SOLID原則を適用してReactコードの単一原則コンポーネントコード分割手順を整理する方法:

インタフェース呼び出しコード

を分離する.

インタフェースの論理処理コードを分離し、対応するインタフェース(フィルタコードと呼び出しコードを直接関連付ける)

を呼び出す.
STAR star(シナリオsituation、タスクtask、アクション、結果result):situation:何が起こったのか、つまり需要は何なのか.task:あなたの任務が何なのか、プロジェクトでどのような役割を果たしているのかを明確にしますaction:この状況に対して、あなたはどのような行動を取って、あなたはどのようにプロジェクトresult全体を推進します:結果はどのようにして、どのようなコンポーネント化開発の目的を学んでコードの冗長性を減らして、メンテナンスを便利にして、多重コンポーネント化開発の結果が多重化することができて、組み合わせることができて、高集約低結合
コンポーネント化リファレンスコンポーネント化開発コンポーネントパッケージ原則フロントエンドコンポーネント設計原則(推奨)コンポーネント化開発に考慮すべき問題

単一の職責原則:パッケージされたコンポーネントは、1つのビジネスニーズ(ビジネスコンポーネント)

を完了するためにのみ使用されるべきである.

コンポーネントは、state、props、methods

を考慮する必要があります.

データをフラット化し、オブジェクトをサブアセンブリに直接渡さずに伝達します.基本データ型(このような考慮は、サブコンポーネントの直接親コンポーネントの値の変更を懸念するか、親コンポーネントオブジェクトのある無関係属性の変化が直接コンポーネントに傍受されることによる性能問題を懸念するかもしれないが、そうであれば、不変のデータに対して直接対象をサブコンポーネントに伝達することができるが、これではサブコンポーネントの多重化を考慮して直接オブジェクトを伝達する必要がある.サブコンポーネントがどのような属性を必要とするかは不明であり、後続の多重化時に漏洩する可能性がある)

stateの変更は、他のapiが

変化したためではなく、インタラクションまたはapiの応答に基づいなければならない.

松結合、コンポーネントのコアは多重化可能で、完全な機能

精製エキスは、コンポーネントが必要なjsのみを含む必要があり、他のapi呼び出し、データフォーマット、後にコンポーネントにまたがって多重化されたデータが外部js処理

に渡される.

vuexに依存しないでください.vuexは状態を管理するために使用されます.コンポーネント化では、vuexに依存してパラメータを転送しないでください.そう考えると、確かに適切です.コンポーネント化をレンダリングする以上、vuexでパラメータを転送すると、コンポーネントの使用が複雑になる可能性があります.また、応答式を実現するにはcomputedとwatchを借りる必要があり、多重化時に傍受が頻繁になるという問題があります.また、コンポーネントで使用するvuexの状態も不透明であり、propsほど直感的ではない

である.
コンポーネント値

.sync構文糖:親コンポーネントがpropsを介してサブコンポーネントにデータを渡す場合は一方向であり、サブコンポーネントは属性値を直接変更することはできません.sync構文糖は、v-bindとupdateの組合せであり、v-bindによって属性値をバインドし、updateイベントによって親コンポーネント(v-bind:name 1.sync=‘name 2’=>v-bind:name 1=’name 2’@update:name 1=‘val=>name 2=val")サブコンポーネントに$emit(‘update:name 1’,val)によって更新され、props:[‘name 1’]によって

を受信する

v-model構文糖:v-bindとinputの組合せ、v-bindによって属性値をバインドし、inputイベントによって親コンポーネントに通知する:v-bind:value="value 2"@input="value 2=argument[0]=>v-model="value 2サブコンポーネントは$emit(‘input’,val)、props:[‘value’]で受信し、v-modelのpropとevent

をカスタマイズすることもできる

  model: {
     
    prop: 'test2',
    event: 'change'
  },
  props: ['test2'],

v-bind:test 2="test 2"@change="test 2=argument[0]参照:Vueコンポーネントワールド

provide/inject:非応答式で、関数、親コンポーネント定義メソッドを伝達し、子孫コンポーネントに伝達する方法

を実行します.
サブコンポーネントが親コンポーネントのプロパティを受信する原理?親コンポーネントで子コンポーネントを使用する方法はラベルで使用し、属性で値を渡す方法ですが、HTMLとは何ですか?HTML理解HTMLの理解2 htmlはハイパーテキストタグ言語で、コンピュータはhtmlの中の文字列を認識してそれからホームページのHTMLタグと要素の区別ラベルに変換することができます先括弧で囲まれたキーワードで、対になって現れて、例えば:要素:html要素のようです、先括弧の中の部分は要素の内容と呼ばれて、html要素は属性の概念があって、要素はラベルの中で何がDOM DOMでHTMLがオブジェクトの表現形式に基づいていることを定義して、domはhtmlと異なって、domを通じてhtmlにアクセスして、修正することができます