为什么Vue没有初始化？

Question

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

首先，我将向您展示所有工作原理（代码）。

Rails应用程序中来自主层的部分代码：

body
  #app
    = yield

以及JS中的部分代码：

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

现在要解决这个问题。

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

可能是什么问题？为什么浏览器启动后会快速加载页面（可能是从缓存？），而对Vue的反应却很差？

Answer 1

在DOM准备就绪时执行代码：

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