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

Question

Как запустить код 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 загружен и готов к инициализации на странице.
Спасибо!

1121 2

javascript html vue.js

2 ответов:

Comments

Ничего не найдено.

Roy J · Accepted Answer · 2017-05-23 15:26:19

Используйте событие load, чтобы дождаться завершения загрузки всех ресурсов:
<script>
  window.addEventListener("load", function(event) {
    // here is the Vue code
  });
</script>
Дальнейшее объяснение

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

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

ctf0 · Accepted Answer · 2018-09-23 04:39:12

Использовать вю mounted() чтобы запустить любой код на странице загрузки, и updated(), чтобы запустить после любого компонента операции, поэтому идеальным решением будет сочетание обоих Рой Дж и вю жизненный цикл крючки
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) его лучше использовать внутри события окна, чтобы убедиться, что вы получаете правильные значения.

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

Вместо window.addEventListener('load') есть также другой способ с помощью document.readyState, так что выше может быть
mounted() {
  document.onreadystatechange = () => { 
    if (document.readyState == "complete") { 
        // run code here
    } 
  }
},
Обновление 2:

Самым надежным способом, который я нашел до сих пор, было бы использование debounce на $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