Vue3 は、Vue2 のようにクラス フィールドの内部更新に反応しません。

Question

Vue2 では要素をクラスのプロパティにバインドでき、そのようなプロパティが Vue 世界の外から変更されると要素が更新されることに気付きましたが、これは Vue3 では当てはまらないようです。

ここで私が言いたいことを説明するために 2 つの簡単な例を作成しました。

Vue2：https://codesandbox.io/s/vue2-6hztv

Vue3：https://codesandbox.io/s/vue3-o2rfn

クラスフィールドをインクリメントする内部タイマーを持つクラスがあります。 Vue2 では、

myClass.field にバインドされた要素は正しく更新されますが、Vue3 では何も起こりません。

私の質問は

です

1.ここで Vue2 と Vue3 に違いがあるのはなぜですか? <强>

2. Vue2 の例のようなことを Vue3 で実現するにはどうすればよいでしょうか? <强>

Vue ライフサイクル メソッド内ではタイマーを実行できないことに注意してください。クラスフィールド自体を更新する必要があります。

これは動作しない Vue3 コードです:

HTML：

リーリー

JavaScript：

ああああ

Answer 1

この回答で述べたように、Vue 3 でプロキシ オブジェクトを作成して反応性を有効にします。コンストラクター内の this はプロキシではなく元のクラス インスタンスを参照するため、リアクティブにすることはできません。

解決策は、クラス コンストラクターと、this がリアクティブであることを期待する副作用設定を分離することです。このセットアップ方法により、流暢なインターフェイス パターンが有効になり、使いやすくなります:

リーリー

オプション API では次のようになります:

リーリー

コンポジション API では、次のようになります::

リーリー