「外部」配列に対する Vue3 の反応性

Question

既存のアプリケーションを Vue2 から Vue3 に移植しているときに、驚くべき問題に遭遇しました。

Vue3 で「外部」配列の変更を監視するにはどうすればよいですか?

これは Vue2 では正常に動作しましたが、Vue3 では動作しなくなりました:

リーリー

代わりに app.dataArray.push を呼び出したり、$forceUpdate などを呼び出したりできることはわかっていますが、Vue に単に既存の配列を監視させる方法はありますか?

より広範な質問は、Vue3 を任意の純粋な JS オブジェクトにバインドするにはどうすればよいかということだと思います。オブジェクトが複雑すぎてオーバーライドできないか、制御できない外部 API から取得されたものである可能性があります。これは、Vue2 または Angular では簡単です (インスタンス/コンポーネントの一部であるかどうかに関係なく、通常のオブジェクトへの双方向バインディング)

PS これは Vue3 における大きな破壊的な変更のように見えますが、どこにも言及されていません。

更新:

@Dimava の答えに基づくと、上記のコードを修正する最も苦痛の少ない方法は次のとおりです。

ああああ

Answer 1

配列をReactive 1

にする必要があります リーリー

1 (パフォーマンス上の理由から応答すべきではない大きなオブジェクトが多数含まれている場合は ShallowReactive)