为什么Vue没有初始化？答案

【问题标题】：Why is Vue not initialized?为什么Vue没有初始化？
【发布时间】：2019-03-21 19:46:36
【问题描述】：

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

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

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

body
  #app
    = yield

以及部分来自JS的代码：

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

现在谈谈这个问题。

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

可能是什么问题？为什么浏览器在启动后会快速加载页面（可能从缓存中？）并且对 Vue 反应不佳？

【问题讨论】：

【解决方案1】：

当 DOM 准备好时执行代码：

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

【讨论】：