Vue, Map and Set veri tiplerinde reaktiviteyi destekliyor mu? Vue.js için

Question

docs akıllı otomatik değişimi izleme düz JavaScript için nesneleri söz: JavaScript nesne veri seçeneği olarak Vue örneğine bir ova geçirdiğinizde

, Vue.js yürüyecek tüm özelliklerini kullanarak ve Object.defineProperty kullanarak getter/setters dönüştürün.

Ben Vue Map s ve Set iç durumuna aramaları (ve dolayısıyla, değişiklikleri) izlemek için olsun nasıl JavaScript'ın Map ve Set veri türleri kendi dahili get/ set yöntemlerle kullanılmak üzere tasarlanmış olduğundan

, s?

Answer 1

Vue.js (henüz?) Map ve Set veri türleri üzerinde reaktiviteyi desteklemez.

Kümeler ve Maps Vue tarafından gözlemlenebilir değildir: feature ticket

bazı tartışma ve (kullanıcı "Inca" tarafından) etrafında bu işi vardır. ya v-for yılında veya vb bilgisayarlı özellikleri, yöntemleri, gözlemcileri, şablon ifadeler, içinde - - olanlar kullanmak için bu yapının bir seri hale getirilebilir kopyasını oluşturup Vue maruz gerekir. Bu olmayan gözlemlenebilir veriler reaktif yapmak için bir tür hacky ama% 100 çalışma yöntemini göstermektedir

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; 
    } 
} 

: İşte Set olduğunu güncellenen bu bilgileri Vue sağlamak için basit bir sayaç kullanan bir naif bir örnek. Böylece hiçbir yapay sayaçlar/hacks Yine gerçek dünya durumlarda ben Kümeler tefrika sürümleri ile sona erdi/Haritalar (örneğin muhtemelen mağazaya localStorage setleri/haritaların değiştirilmiş sürümlerini isterdim ve böylece onları yine de serialize) dahil edildi.