Vue Compute() がリアクティブ マップで起動しない

Question

最初は空のマップの周囲に reactivity があります: const map =reactive({}); と、マップが次のようになったかどうかを示す calculationキー「key」: const mapContainsKeyCompulated = Computed(() => map.hasOwnProperty("key"))。マップを変更しても計算が更新されません。

私は 1 日この問題で立ち往生していましたが、なんとか問題を示す最小限の例を思いつきました。

リーリー

スタックオーバーフローの回答と Vue のドキュメントをたくさん読みましたが、まだ理解できません。

• mapContainsKeyCompulated が更新されないのはなぜですか?
• reactive がマップへのキーの追加または削除を「追跡」しない場合、なぜ Map:{{map}} (行 14) は正常に更新されるのでしょうか?
• map{} を array[] に置き換え、「hasOwnProperty」を「includes()」に置き換えると、正常に動作します。違いはなんですか？
• 醜い「watch」ソリューション (「map.hasOwnProperty(key)」を繰り返す必要がある) を使用せずにこの問題を解決するにはどうすればよいですか?

編集: @estus-flask が述べたように、これは 3.2.46 で修正された VueJS のバグです。

Answer 1

Vue のリアクティブには、リアクティブ オブジェクト メソッドの明示的なサポートが必要です。 hasOwnProperty は非常に低レベルであるため、しばらくサポートされていません。サポートがなければ、map.hasOwnProperty(key) は非リアクティブな元のオブジェクトの key にアクセスしようとし、リアクティブはトリガーされないため、最初の computation この呼び出しでは、次回 map が変更されたときに起動できるリスナーは設定されません。

この問題を解決する 1 つの方法は、最初に key (別の回答で提案されているように) を定義することです。これは、Vue 2 および 3 でリアクティブを機能させる従来の方法です。 リーリー

別の方法は、リアクティブ オブジェクトの欠落している

key プロパティにアクセスすることです: リーリー

もう 1 つの方法は、

in 演算子を使用することです。 Vue 3 は Proxy を使用して応答するため、プロパティが has トラップ経由でアクセスされていることを検出できます: リーリー

hasOwnProperty のサポートは最近 3.2.46 に追加されたため、質問内のコードは最新の Vue バージョンで動作するはずです。

map は実際の地図ではありません。 Map を使用する場合、これはどの Vue 3 バージョンでも異なります。Vue はそれをサポートしており、map.has(key) が反応性をトリガーすると予想されます。