Как запустить код VueJS только после полной загрузки и инициализации Vue?

Я работаю над компонентом Vue, который будет размещен на нескольких веб-сайтах через систему CMS. Проблема, с которой я сталкиваюсь, заключается в том, что даже если мой порядок загрузки JS-скриптов правильный, иногда я получаю эту ошибку:

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

Vue загружается через cdn, и это выше кода компонента.

весь код Vue запускается следующим образом:

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

Я даже добавил setTimeout () внутри события DOMContentLoaded и все еще не сделал трюк. window.onload = function() не работает во всех случаях. Время от времени я все еще получаю эту ошибку. Скрипты загружаются в тело.

вы знаете, что это может быть другой подход? Я хочу быть уверен, что в момент запуска кода Vue Vue загружен и готов к инициализации на странице. Спасибо!

7
html javascript vue.js

2 ответов

использовать нагрузка событие ждать, пока все ресурсы не закончат загрузку:

<script>
  window.addEventListener("load", function(event) {
    // here is the Vue code
  });
</script>

дальнейших объяснений

DOMContentLoaded - это событие, запускаемое при анализе HTML и визуализируется и строится DOM. Обычно он срабатывает довольно быстро в срок службы приложения. С другой стороны,--2--> только уволили, когда все ресурсы (картинки, стили и т. д.) извлекаются из сеть и доступный к браузер.

вы также можете использовать событие load для конкретного скрипта.

8

использовать vue mounted() для запуска любого кода при загрузке страницы и updated() для запуска после любых операций компонентов, поэтому идеальным решением будет объединение обоих Рой Дж и vue жизненный цикл крючки

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
}

обратите внимание, что можно опустить window.addEventListener() и он все равно будет работать, но он может пропустить +, если вы используете что-то вроде jquery outerHeight(true) лучше использовать его внутри события window, чтобы убедиться, что вы получаете правильные значения.

обновление 1 :

вместо window.addEventListener('load') существует и другой способ с помощью document.readyState таким образом, выше может быть

mounted() {
  document.onreadystatechange = () => { 
    if (document.readyState == "complete") { 
        // run code here
    } 
  }
},

обновление 2 :

самый надежный способ, который я нашел до сих пор, будет использовать debounce on $nextTick, так что использование становится

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

при использовании debounce С обновлено это становится сложно, поэтому убедитесь, что проверить его B4 движется дальше.

обновление 3 :

вы также можете попробовать mutationobserver'а

Ps:

если вам нужен способ сделать что-то после того, как список закончил рендеринг, попробуйте пакет, который я сделал специально для этого https://github.com/ctf0/vue-list-rendered

16