即使元素不在页面上，也会调用 VueJS 实例答案

【问题标题】：VueJS instance is being called even if the element is not on the page即使元素不在页面上，也会调用 VueJS 实例
【发布时间】：2019-03-28 20:17:38
【问题描述】：

我面临一个问题，即即使元素不在页面上，我的所有 VueJS 实例也会被调用。

我有一个这样声明的 mixin。

var mixin = {
  methods: {
    listEvents(parameters) { 
      return axios.get('/api/v1/events', {params: parameters})
    },
    listLocations(parameters) { 
      return axios.get('/api/v1/locations', {params: parameters})
    },
  }
}

还有多个使用这种混合的实例。如果你问为什么要多个实例，那是因为我在多个页面中使用了 VuejS。例如，我有一个列出事件的页面和一个列出位置的页面。所以我所有的方法都在 mixin 中，然后调用为页面创建的实例，因为页面包含实例中指定的 element（例如：id="locations" 和 el: “#locations”）

一个实例的示例：

// Vue
new Vue({
  el: '#locations',
  delimiters: ['[[', ']]'],
  mixins: [mixin],
  data: {
    locations: [],
    loading: true,
    error: false,
    page: 1,
    perPage: 20,
  },
  mounted: function () {
    console.log("VUEJS 'locations' has been mounted")
    this.init();
  },
  methods: {
    init() {
...
...

但是，无论我在哪个页面上，都会调用所有实例......我可以看到所有 API 调用，传单地图已启动但没有容器，......这是一团糟。

我是否完全错过了什么或误解？

编辑：我可以补充一点，所有实例都在 app.js 中，并且这个 app.js 包含在所有页面中。

【问题讨论】：

所以你在每个页面上都实例化了 Vue，你问为什么 Vue 在每个页面上都被实例化了？当您调用 new Vue(); 时，您正在实例化 Vue。
我认为这不是 OP 所要求的。他们在mounted 中调用init。据我所知，如果页面上不存在根 HTML 元素，则不应调用 mounted。
Vue 绝对比 jQuery 更好地使用 (IMO)，所以我认为这是一个不错的选择。然而，没有简单的方法可以退出创建对象。传递给new Vue 的对象只是一个初始化对象。无论如何都会创建一个 Vue 对象；这就是 javascript 的工作原理。
@Elwyn，如果您的应用程序有多个页面，为什么不为这些特定页面拆分您的 Vue 实例并为每个页面使用适当的脚本，而不是为每个页面下载一刀切的 app.js页？听起来您正在尝试使用单页脚本运行多页应用程序。
@Elwyn，您仍然可以使用 mixin。只有在实例化 Vue 时才添加 mixin。所以当你拆分你的代码，并且你在一个实例化 Vue 的页面上时，你只需给你的 Vue 实例提供 mixin 来扩展它的功能。

标签： javascript vue.js

【解决方案1】：

听起来你在每个页面上都加载了一些脚本，实例化新的 Vue 对象，而不管这些 Vue 附加到的元素是否被渲染。

即使您实例化它的元素不存在，Vue 也会创建实例。

既然如此，您可以在创建 Vue 之前简单地检查元素是否存在。

const locations = document.querySelector("#locations")
if (locations) {
  new Vue({
    el: "#locations",
    ...
  })
}

【讨论】：

感谢您的解决方法。但我不喜欢“解决方法”这个词，因为这意味着我想用 VueJS 实现的目标是不正确的..