javascript - 为什么 Vue 没有初始化？

Question

我有一个 Rails 应用程序。有时在页面上我会放置 Vue 组件。它可以是简单的动态列表。但是也可以有一个更复杂的实现，其中有许多组件相互嵌套。

首先，我将向您展示它是如何工作的(代码)。

Rails 应用程序主层的部分代码:

body
  #app
    = yield

部分代码来自JS:

if (document.getElementById('app')) {
  new Vue({
    el: '#app',

现在谈谈问题。

有时，当我打开浏览器时，我加载了没有 Vue 组件的页面。此问题在 macOS Chrome/Safari 和 iOS Safari 中同样重要。但如果我手动重新加载页面，那么一切都很好。

可能是什么问题？为什么浏览器在启动后快速加载页面(可能是从缓存？)并且对 Vue 的 react 很差？

Answer 1

当 DOM 就绪时执行代码:

document.addEventListener('DOMContentLoaded', (event) => {
  if (document.getElementById('app')) {
    new Vue({
     el: '#app',
     ...
})