Wie laufen VueJS code nur nach Vue ist voll geladen und initialisiert?

Arbeite ich an einem Vue-Komponente gesetzt wird auf mehrere Webseiten über ein CMS-system. Die Frage, die ich begegnen, ist, dass selbst wenn mein js Script Ladereihenfolge ist richtig, irgendwann bekomme ich diesen Fehler:

Uncaught ReferenceError: Vue is not defined
    at HTMLDocument.<anonymous>

Vue geladen wird über cdn und es ist über die Komponente code.

Alle Vue-code wird ausgeführt, wie diese:

document.addEventListener("DOMContentLoaded", () => {
  //here is the Vue code
});

Ich auch noch ein setTimeout() in der DOMContentLoaded-Ereignis und immer noch nicht den trick tun.
window.onload = function() nicht in allen Fällen. Ich habe immer noch diesen Fehler von Zeit zu Zeit.
Die Skripte geladen werden, in den Körper.

Haben Sie eine Idee, was es sein kann, einen anderen Ansatz? Ich möchte sicher sein, dass in dem moment die Vue-code ausgelöst wird, Vue geladen und bereit zu sein, initialisiert auf der Seite.
Danke!

Versuchen Sie zu vermeiden, mit CDN, ist ein asynchroner Prozess, und wenn die Bibliothek updates vielleicht dein Skript gebrochen werden konnte.
Als Lösung u der check-in Intervall : 'Vue undefined?'

InformationsquelleAutor Bogdan Lungu | 2017-04-27

14

Verwenden das load-Ereignis zu warten, bis alle Ressourcen geladen:
```
<script>
  window.addEventListener("load", function(event) {
    //here is the Vue code
  });
</script>
```
Weitere Erklärung

DOMContentLoaded ist ein Ereignis, das ausgelöst wird, wenn der HTML-Code wird geparst und
gerendert und DOM aufgebaut ist. Es ist gewoehnlich Recht schnell in
die Lebenszeit der app. Auf der anderen Seite load wird nur ausgelöst, wenn
alle Ressourcen (Bilder, stylesheets usw.) abgerufen von der
Netzwerk und für den browser.

Können Sie auch das load-Ereignis für ein bestimmtes script.

ich habe nur die Konsole.melden Sie innerhalb dieser Funktion, nichts geschieht, wie ich es getestet habe funktionieren oder nicht
console.log sollte sehen, ob der code ausgeführt wurde. Sie könnten auch gehen in den browser, debugger und setzen Sie einen break-Punkt. Vielleicht sollten Sie sich eine Frage stellen.

InformationsquelleAutor Roy J
27

verwenden vue mounted() zum ausführen von beliebigen code auf die Seite laden, und updated() zu laufen, nachdem alle Operationen auf Komponenten, damit eine perfekte Lösung wäre die Kombination beider Roy j und vue lifecycle-hooks
```
mounted() {
    window.addEventListener('load', () => {
         //run after everything is in-place
    })
},

//99% using "mounted()" with the code above is enough, 
//but incase its not, you can also hook into "updated()"
//
//keep in mind that any code in here will re-run on each time the DOM change
updated() {
    //run something after dom has changed by vue
}
```
beachten Sie, dass kann man auch weglassen window.addEventListener() und es immer noch zu funktionieren, aber es verpassen könnte + wenn Sie mit so etwas wie jquery outerHeight(true) ist es besser, verwenden Sie es in das Fenster-Ereignis, um sicherzustellen, Sie werden immer die richtigen Werte.

Update 1 :

statt window.addEventListener('load') es gibt auch einen anderen Weg, indem Sie document.readyState so können die genannten
```
mounted() {
  document.onreadystatechange = () => { 
    if (document.readyState == "complete") { 
        //run code here
    } 
  }
},
```
Update 2 :

die zuverlässigste Art, die ich bisher gefunden habe, wäre mit debounce auf $nextTick, so wird der Gebrauch
```
import debounce from 'lodash/debounce'

//bad
updated() {
    this.$nextTick(debounce(() => {
        console.log('test') //runs multiple times
    }, 250)) //increase to ur needs
}

//good
updated: debounce(function () {
    this.$nextTick(() => {
        console.log('test') //runs only once
    })
}, 250) //increase to ur needs
```
bei der Verwendung debounce mit aktualisiert es schwierig wird, so stellen Sie sicher, um es zu testen, b4 bewegen.

Update 3 :

können Sie auch versuchen, MutationObserver

Da die Frage im Kontext Vue, sollte dies die akzeptierte Antwort.
Vue.nextick anstelle von setTimeout in diesem Fall.
nexttick nicht immer so funktioniert wie erwartet & weder abgewiesen wird, weil der dom kann länger dauern, zu aktualisieren, leider vue nicht über ein Ereignis, wenn dom fertig zu aktualisieren, so dass Ihr ein bisschen hit & miss
Ich glaube nicht, dass. Deine Antwort Wunde nicht helfen, mich am Ende, weil ich brauchte, um eine axios-Aufruf auf planner.vue zum aktualisieren der vuex Staat, und mit dem code oben funktioniert aber nur einmal, und wenn das dom geladen wurde, auf die spezifische route, die mit Planer.vue, wenn ich von der homepage geladen und ging dann in /app/Planer die Vorlage nicht geladen werden, weil der dom war schon einmal geladen, in der homepage. Ich musste am Ende verschieben die ganze axios Anfrage in eine Vuex Aktion, dann versenden es direkt nach Erstellung der Vuex-Instanz. Dies sollte die akzeptierte Antwort, btw. Lol
Hinzugefügt

InformationsquelleAutor ctf0

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Update 1 :

Update 2 :

Update 3 :