Vue3——Composition API-1 (特に重要)

ここに画像の説明を挿入します

序文

ここに画像の説明を挿入します

JS は関数型プログラミングに移行し始めていますが、何と言うか、バックエンドのものをどんどん使用するようになってきています。
柔軟性はますます便利になってきていますが、各関数のカプセル化はますます複雑になり、そのためバックエンドはより複雑になります。合成API

ここに画像の説明を挿入します
ここに画像の説明を挿入します
公式ウェブサイト:
ここに画像の説明を挿入します
ここに画像の説明を挿入します

セットアップ機能

セットアップにこれはありません
ここに画像の説明を挿入します

なお、setup の戻り値の関数は data と同じであり、戻り値はテンプレート内で使用され、戻り値の関数はメソッド内のメソッドを置き換えます。

ここに画像の説明を挿入します
応答性の高いデータを実装するにはどうすればよいですか?
ここに画像の説明を挿入します
ref を使用してこの一連のロジックをカプセル化できます。
ここに画像の説明を挿入します
使用するときにこのモジュールをインポートするだけでよいため、再利用性が非常に高くなります。

import useCounter from './hooks/useCounter'

また、内部の変数が全てconstで生成されているのが特徴ですが、これには何か理由があるのでしょうか?現在、他のテストも同様に使用できます。

反応的な

リアクティブなデータをむやみに構造化しないでください
ここに画像の説明を挿入します

参照

ここに画像の説明を挿入します

要点を押さえておくと、 ref は変数応答オブジェクトを返し、オブジェクトを返すので、次のような構文になり、テンプレートに自動的に展開されます。

ここに画像の説明を挿入します

ref と reactive の比較

一般に、ref はより頻繁に使用され、ref はより複雑な属性を定義することもできます。

リアクティブ アプリケーション シナリオの概要 (絶対的なものではなく、単なる概要)
このローカル データはサーバーから取得されたデータを指しますか?
ここに画像の説明を挿入します

参考のアプリケーションシナリオ:
ここに画像の説明を挿入します
ネットワークから取得したデータを onmounted に割り当てることができることに注意してください。

fehelper拡張プラグイン

インストール後のデバッグがより便利になります。
ここに画像の説明を挿入します

読み取り専用 (理解)

序文:一方向データ フロー。一方向データ フローの原理によれば、親コンポーネントはデータの送信のみを担当します。子コンポーネントは親コンポーネントを変更できません。変更したい場合は、イベントを生成し、親コンポーネントにそれを変更させます。同時に、誰がデータを変更したいのかを親コンポーネントに知らせることもできます。したがって、そのような変更をどのように変更し、イベントを送信して、
ここに画像の説明を挿入します
親コンポーネントに変更させるかは次のとおりです。
ここに画像の説明を挿入します

ここに画像の説明を挿入します

ここに画像の説明を挿入します

セットアップの補助機能(理解)

これらの関数は補足的な理解です。知っておくだけで大丈夫です。あまり使わないので知らなくても問題ありません。重要なのは、reactive と ref の使い方をマスターすることです。この toRefs は非常に便利です
ここに画像の説明を挿入します

ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します

セットアップではこれを使用できません

ここに画像の説明を挿入します
ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/Tommy__li/article/details/128456435