Question

我正在开发一个Vue组件，它将通过CMS系统放置在多个网站上。我遇到的问题是，即使我的js脚本加载顺序正确，有时我也会收到此错误：

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

Vue通过cdn加载，它位于组件代码上方。

所有Vue代码都是这样运行的：

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

我甚至在DOMContentLoaded事件中添加了一个setTimeout（），但仍然没有做到这一点。 window.onload = function()在所有情况下均无效。我还是经常遇到这个错误。脚本将加载到正文中。

你知道它可能是另一种方法吗？我想确保在激活Vue代码的那一刻，Vue已加载并准备在页面上初始化。谢谢！

Answer 1

使用vue mounted()在页面加载时运行任何代码，updated()在任何组件操作后运行，因此完美的解决方案是将 Roy j 和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
}

请注意，您可以省略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

Answer 2

使用the load event等待所有资源加载完毕：

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

Further explanation

DOMContentLoaded是解析HTML时触发的事件渲染并构建DOM。它通常很快被解雇了应用程序的生命周期。另一方面，load仅在被发射时被触发从中检索所有资源（图像，样式表等）网络，可供浏览器使用。

您也可以使用the load event for a specific script。

如何在Vue完全加载并初始化后运行VueJS代码？

2 个答案:

更新1：

更新2：

更新3：