在Vue.js应用程序中使用自定义JavaScript代码

Question

我正在尝试在Vue.js路由器应用程序中插入JavaScript代码。我需要从应用程序的CMS加载数据。为了从内容管理系统获取数据，我必须使用来自内容管理系统的JavaScript库，该库不是为Vue设计的，也不像现代JS那样导出它的类/函数。因此，我通过脚本标记从index.html中导入JS库。这可以达到预期的效果。

但是现在我必须使用这个CMS JavaScript库中的类。在将其编写为Vue-Router应用程序之前，我只是出于模板目的使用了Vue。因此，我在window.onload事件处理程序中打包了一些代码。我必须为CMS数据访问类创建一个实例。但这会导致构建错误(使用vue-cli build)。由于构建过程中没有可理解的错误消息，因此我必须使用试错法。即使像var a = 1这样简单的变量赋值似乎也是不允许的。console.log('something')可以工作。但是不允许其他任何东西(除了定义onload-event处理程序)

我已经将此代码添加到App.vue (由vue-cli create创建)内的<script>标记中。

window.onload = function() {
    
    try {
        // Instantiate class obj for CMS data access
        cmsDataAccessObj = new CMSAccessData();
        waitForPlayerData = true;
    }
    catch (e) {
        console.error(e);
    }
}

更新

在测试了答案中的不同解决方案后，我意识到使用非实例变量似乎会导致构建错误。

这会给出一个错误：

        waitForPlayerData = true;

这是可行的：

        this.waitForPlayerData = true;

Answer 1

我不推荐使用window.load来运行你的代码。在Vue.js中有更多的本机方法可以做到这一点。

如果你想在加载之前在应用程序的主组件中运行它，你应该做的是将代码放在主组件的beforeCreate生命周期钩子中。

...
beforeCreate () {
  this.cmsDataLoader()
},
methods: {
  cmsDataLoader () {
    try {
        // Instantiate class obj for CMS data access
        cmsDataAccessObj = new CMSAccessData();
        waitForPlayerData = true;
    }
    catch (e) {
        console.error(e);
    }
  }
}
...

这将在每次创建组件时运行代码，然后在创建之前。如果您想在创建组件后使用运行它，也可以使用created生命周期钩子。

有关lifecycle hooks的更多信息，请查看以下链接。

Answer 2

在Vue.js应用程序中放置JavaScript的最好方法是mounted函数，它在组件加载时调用：

export default {
    name: "component_name",
    mounted() {
        let array = document.querySelectorAll('.list_item');
    },
}

Answer 3

你不需要window.onload，你可以把你想放的东西放在那里。我不能完全确定它在生命周期中呈现的确切时间，也许有人可以加入进来让我们知道，但它肯定会在页面开始时呈现。(尽管它甚至在生命周期挂钩开始之前就能解决您的需求，这是有意义的)

如果你想在Vue加载之前加载它，

1. 更好&更简单的解决方案是将它添加到main.js文件中。你在那里有完全的控制权，你可以在Vue初始化之前加载它。

在那里也不需要window.onload，只需将其放在前面或在初始化Vue之前导入JS文件，因为它将按顺序初始化。