websocket + vuejs: Bildschirm Flackern, sichtbaren Schnurrbart Code

Question

Ich baute eine Web-App mit Websockets und Vuejs.

Im DOM möchte ich die Daten von Vuejs überlappen. Die Daten werden jedoch später in der Zeitleiste festgelegt, nachdem eine Websocket-Verbindung hergestellt wurde und die Daten empfangen wurden.

Bis zu diesem Punkt (etwa 0,5 Sekunden), können Sie den Code für den Schnurrbart für vuejs auf der Website selbst sehen, dann sehen Sie es flimmern und die echten Daten hinzufügen.

Ich schaffe das Ansichtsmodell, wenn Daten aus dem websocket Verbindung empfangen, wie folgt aus:

onMessage: function (e) { 
    new Vue({ 
     el: '#messages', 
     data: { 
      messages: e.data 
     } 
    }); 
} 

Was ich bereits versucht wurde, um die Viewmodels auf Seite Last Initialisierung und später den Datensatz:

var vms = { 
    messages: new Vue({ 
     el: '#messages', 
     data: { 
      messages: { 
      } 
     } 
    }) 
}; 

im onMessage Ereignis des websocket:

var vm = vms.messages; 
vm.$data = { messages: body }; 

Das Problem ist jedoch, dass es immer noch eine Verzögerung gibt, bis der vm initialisiert ist. Die Sequenz ist wie folgt:

Seite zu laden -> sichtbaren Schnurrbart Code -> Schnurrbart-Code versteckt, da die Daten in ein leeres Objekt festgelegt ist -> real-Daten, nachdem sie von der websocket

Irgendwelche Ideen erhalten hat gezeigt/Best Practices in dieser Angelegenheit?

Answer 1

Ich habe das gleiche Problem, bis ich die api doc lesen. Hier ist der Link für v-cloak directives!

HTML:

<div id="demo" v-cloak><p>{{ test }}</p></div> 

CSS:

[v-cloak] {display: none} 

Answer 2

Basierend auf Dandavis 'Kommentar, fügte ich eine "versteckte" Klasse (display: none) zum DOM und v-class="hidden: !done", um die Sichtbarkeit des DOM zu ändern. done ist ein Schlüssel-Wert-Paar in den Daten des ViewModels.

HTML:

<div class="message hidden" v-repeat="messages" v-class="hidden: !done">...</div> 

Javascript:

onMessage: function (e) { 
    new Vue({ 
     el: '#messages', 
     data: { 
      messages: e.data, 
      done: true 
     } 
    }); 
}