Czy Vue obsługuje reaktywność w Map i Ustaw typy danych?

Question

Docs dla Vue.js wspomnieć inteligentnego automatycznego śledzenia zmian dla zwykły JavaScript obiektów:

Po przejechaniu zwykły JavaScript Object do instancji Vue jako własnego uznania danych Vue.js będą chodzić poprzez wszystkie jego właściwości i przekonwertuj je do obiektów pobierających/ustawiających za pomocą Object.defineProperty.

Od Javascript w Map i Set typy danych są przeznaczone do stosowania z ich get/set metod zbudowany, w jaki sposób mogę uzyskać Vue do śledzenia połączeń (a tym samym zmian) do stanu wewnętrznego Map s oraz Set s?

Answer 1

Vue.js nie obsługuje reaktywności na typach danych Map i Set (jeszcze?).

feature ticket ma jakąś dyskusję i to obejść (przez użytkownika „Inca”):

Zestawy i mapy nie są obserwowalne przez Vue. Aby użyć ich - albo w v-for, albo w wyliczonych właściwościach, metodach, obserwatorach, wyrażeniach szablonów, itp. - musisz utworzyć replikę nadającą do serializacji tej struktury i udostępnić ją Vue. Oto przykład, który naiwny używa prostego licznika za dostarczanie Vue z informacją, że Set jest aktualizacja:

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

ten ilustruje trochę hacky ale 100% sprawny sposób wytwarzania dane nierynkowe reaktywne. Mimo to w rzeczywistych przypadkach otrzymałem z serializowanymi wersjami zestawów/map (np. Prawdopodobnie chcesz przechowywać zmodyfikowane wersje zestawów/map w localstorage i tym samym serializować je tak czy inaczej), więc nie ma sztucznych liczników/hacków byli zaangażowani.