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

Question

我遇到一个问题，即使该元素不在页面上，我的所有 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 中，然后调用为页面创建的实例，因为页面包含实例中指定的元素(例如: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 调用，传单 map 已启动但没有容器，...一团糟。

我是否完全遗漏了什么或完全误解了？

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

Answer 1

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

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

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

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