Vue コンポーネント値転送中のデータ損失の分析と解決

序文

前回の記事では、JavaScript の 2 つのデータ型、基本型と参照型、および参照型の浅いコピーと深いコピーについて紹介しました。ここで注意すべき点は、この記事の参照型値をディープコピーする方法は完璧ではなく、参照型値内の一部の属性値は新しい変数に完全にコピーできないということです。たとえば、ディープコピー処理中に関数の値が失われます。

質問

実際のプロジェクトでは、二次カプセル化コンポーネントを使用し、カプセル化コンポーネント内で属性値のディープコピー操作を実行すると、渡される属性値が参照型の値であるため、一部のデータが失われる可能性が非常に高くなります。

例

el-table カプセル化に基づく ak-table コンポーネントを例に挙げます。

row-key 属性を ak-table コンポーネントに渡します。この属性は関数 Function(row) を渡すことができます。詳細については、公式ドキュメントを参照してください。

通常のロジックによれば、ak-table に渡された属性値は el-table コンポーネントにそのまま渡されるはずですが、ここで奇妙なことが起こりました。渡した関数がコンポーネント内で消えてしまったのです。

問題分析

まず、ak-table の row-key 属性の値、つまり関数、つまり参照型の値を渡します。すると、冒頭で述べたように、参照型の値に対して一般的なディープコピー操作を実行すると、関数や配列などのデータが失われます。

ak-table で、row-key 属性を見つけます。これは props では定義されていないため、コンポーネントの attrs 属性に保存する必要があります。マウントされたメソッドに移動し、attrs 属性を出力します。マウントされたメソッドに移動し、attrs の値を出力して、コピー前後のデータの比較を確認します。

コンソール出力

———————————————————————————————————————

ここでの問題は非常に明確です。まず、ak-table コンポーネントは渡された属性値を実際に初期化し、次に $attrs に対してディープ コピー操作を実行します。コピー後、行キー属性値が失われ、データ損失が発生します。

解決

渡された参照型の値については、子コンポーネントは props 属性を介して親コンポーネントから直接値を受け取り、渡された値を処理せずに直接使用します。

渡される参照型の値は、コピー時に特別な扱いを受け、必要な属性値は新しい変数に再帰的にコピーされる必要があります。

要約する

JavaScript の基本型と参照型を理解し、参照型の値をコピーすることは、この言語で開発するための基本的なスキルです。時々、不注意により、変数を単純に大まかにコピーすると、その変数の完全な複製が取得されると考え、一部のデータが「消える」ことがあります。現時点では、記事の解決策を参照できます。これは、プロジェクト開発中に遭遇した問題です。ここに記録して、皆さんのお役に立てれば幸いです。

これで、Vue コンポーネントの値転送中のデータ損失の分析と解決に関するこの記事は終了です。Vue コンポーネントの値損失に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

参考リンク: JavaScript のディープコピーの落とし穴