VueはMapおよびSetデータ型に対して反応性をサポートしていますか？ Vue.jsため

Question

ドキュメント言及スマート自動変更追跡プレーンなJavascriptのためには、オブジェクト：

あなたはそのデータオプションとしてVueのインスタンスへの無地のJavaScriptオブジェクトを渡すと、Vue.jsが歩いていきますすべてのプロパティを介して取得し、Object.definePropertyを使用してgetter/setterに変換します。内部Map Sの状態とSetに

のJavascriptのMapとSetデータ型がどのように私はVueの通話（したがって、変化）を追跡するために取得することができ、その内蔵get/set方法で使用するように設計されているので、 ？

Answer 1

Vue.jsはMapおよびSetのデータタイプ（まだですか？）で反応性をサポートしていません。

セットとマップのヴューで観察できない：feature ticket

は、いくつかの議論と（ユーザー「INCA」による）の周りにこの作品を持っています。これらをv-forまたは計算されたプロパティ、メソッド、ウォッチャー、 テンプレート式などで使用するには、この構造のシリアライズ可能なレプリカ を作成してVueに公開する必要があります。ここでSetが更新 であるという情報とのVueを提供するためのシンプルなカウンタを使用しています 素朴な例です：

data() { 
    mySetChangeTracker: 1, 
    mySet: new Set(), 
}, 

computed: { 
    mySetAsList() { 
    // By using `mySetChangeTracker` we tell Vue that this property depends on it, 
    // so it gets re-evaluated whenever `mySetChangeTracker` changes 
    return this.mySetChangeTracker && Array.from(this.mySet); 
    }, 
}, 

methods: { 
    add(item) { 
    this.mySet.add(item); 
    // Trigger Vue updates 
    this.mySetChangeTracker += 1; 
    } 
} 

は、これは反応性 非観察可能なデータを作るためのちょっとハックが、100％の加工方法を説明します。それでも実際のケースでは、 がSets/Mapsのシリアル化されたバージョンで終了しました（例えば、 はローカルストア内にセット/マップの変更バージョンを保存していますので、 はそれをシリアル化します）関係していた。