シナリオの詳細化
ポップアップ ウィンドウ内には選択ボックスがあり、選択ボックスの下で選択できるデータはリクエスト インターフェイスを通じて取得する必要があります。
とてもシンプルな状況だったので、すぐに自分のアイデアが浮かびました。検索を実装し、データが少ない場合は、elementplus に付属するフィルターを直接使用できます。大量のデータがある場合は、val を渡し、バックグラウンドで検索し、ページでレンダリングする必要があります。私は前者を選択したので、データをレンダリングするだけで済みます。
私のアプローチも非常に標準的です。取得するデータは配列型でなければならないため、オプションを定義しました。その中にはオブジェクトがあり、オブジェクトの属性はラベルです。このようなもの：
const pingminOptions = reactive([
{
value: '',
label: ''
}
])
すべての準備が整った後、バックエンド インターフェイスをリクエストし、新しいアレイを取得しました。そして、配列の値を pingminOptions に代入します。
その後、応答性に問題があることが判明し、データは正常に変更されましたが、ページ上にレンダリングする方法がありませんでした。(データの一方向バインドに問題があります)
問題を見つけるプロセス
私のチームリーダーと私は、長い間協力して変更に取り組みました。前の人のコードは非常に乱雑で、最初にすべて let を使用して定義されていたため、問題がわかりませんでした。ただし、const にするとエラーが表示されます。
const エラーは、この参照データの格納場所が変更されたことを示します。
先ほど、取得するデータが data.records である場合、応答データ pingminOptions を定義しました。それで：
pingminOptions = data.records
この方法ではデータの保存場所が変更され、元の data.records は応答性の高いデータではないため、新しく定義された pingminOptions の応答性も無効になります。
正しいアプローチ
正しいアプローチとして、pingmingOptions を指定できます。
const pingmingOptions = {
option: []
}
データを保存するオプションを定義します。次に、data.records の値をオプションに与えることができます。
なぜこれを行うのでしょうか?
その理由は、reactive で定義されたデータ、内部オブジェクトまたは配列もリアクティブであり、深いレベルであるためです。したがって、pingmingOptions の応答の失敗について心配する必要はありません。
toRefについて
チームリーダーとのやりとりの中で、一度toRefsを使わないのではないかと検討したため、toRefsも見直しました。toRef の役割は通常、分解に使用されます。
たとえば、state オブジェクトには、state.a、state.b、state.c などの大量のデータがあります。
ページをレンダリングするときは、毎回状態を取得する必要があります。とても不便です。したがって、toRefs(state) を使用できます。この場合、a、b、c を応答属性に変えるのと同じです。これを使用するときは、テンプレート構文に a、b、c を直接記述することができます。これにより、書き込みが容易になります。
これは、ページがレンダリングされるときにのみ省略できることに注意してください。