Экземпляр VueJS вызывается, даже если элемент отсутствует на странице

Question

Экземпляр VueJS вызывается, даже если элемент отсутствует на странице

1

Я сталкиваюсь с проблемой, когда вызываются все мои экземпляры 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 = "location" и 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, инициируются карты листовки, но контейнера нет... это беспорядок.

Я что-то пропустил или понял?

EDIT: Я могу добавить, что все экземпляры находятся в app.js и этот app.js включен во все страницы.

Elwyn 24 окт. 2018, в 14:39

Источник

0

Итак, вы создаете экземпляр Vue на каждой странице и спрашиваете, почему Vue создается на каждой странице? При вызове new Vue(); Вы создаете экземпляр Vue.
Kamil Jarosz 24 окт. 2018, в 12:22
0

Я не думаю, что это то, что спрашивает ОП. Они называют init в mounted . Насколько мне известно, mounted не должен вызываться, если корневого HTML-элемента не существует на странице.
Josh 24 окт. 2018, в 12:29
0

@KamilJarosz Я почти уверен, что что-то пропустил, хорошо, но element здесь, чтобы сказать VueJs: нужно использовать или нет. Нет? Я имею в виду, метод init() который я использовал, находится в mounted части ...
Elwyn 24 окт. 2018, в 12:32
0

Вы понимаете это правильно, но Vue будет создан независимо от того, существует элемент или нет. Он просто не будет подключен к нулевому (несуществующему) элементу.
Bert 24 окт. 2018, в 12:33
0

@Bert Хм ... Это грустные новости, я имею в виду .. Я думал, что это была цель element . Я видел ваше решение, большое спасибо. Но я нахожу это немного "уродливым", потому что я хотел только чистый код VuejS. Я единственный, кто использует VueJS на нескольких страницах?
Elwyn 24 окт. 2018, в 12:36
0

Нет, я думаю, что люди либо не загружают скрипт на страницах, где он не нужен, либо у них нет проблем с использованием javascript. К сожалению, я не вижу другого пути обойти это.
Bert 24 окт. 2018, в 12:37
0

@Bert Честно говоря, я просто заменил весь свой код jQuery, полный селекторов DOM, на этот код VueJS, который мне показался более красивым и мощным.
Elwyn 24 окт. 2018, в 12:39
1

Vue определенно приятнее работать с (IMO), чем с jQuery, поэтому я считаю, что это хороший выбор. Однако не существует простого способа отказаться от создания объекта. Объект, переданный new Vue является просто объектом инициализации. Объект Vue будет создан несмотря ни на что; Именно так работает JavaScript.
Bert 24 окт. 2018, в 12:42
1

@Elwyn Elwyn, если в вашем приложении несколько страниц, почему бы просто не разделить экземпляры Vue для этих конкретных страниц и использовать соответствующие сценарии для каждого, вместо того, чтобы загружать файлы app.js одного размера для каждой страницы? Похоже, вы пытаетесь запустить многостраничное приложение с одностраничными скриптами.
Kamil Jarosz 24 окт. 2018, в 12:42
0

@KamilJarosz Это именно то, что я делаю, да, и я думал о разделении, теперь, когда я понимаю ... Но что я делаю с частью mixing ? Мне нравится идея сервисных функций в mixin . О, и я также повторно использую компоненты .. Это я также объявил в app.js
Elwyn 24 окт. 2018, в 12:47
0

@Bert Хорошо, спасибо большое
Elwyn 24 окт. 2018, в 12:47
1

@Elwyn Элвин, ты все еще можешь использовать миксин. Вы только добавляете миксин, когда создаете экземпляр Vue. Поэтому, когда вы разделяете свой код и попадаете на одну из страниц, на которой создается экземпляр Vue, вы просто добавляете свой экземпляр Vue для расширения его функциональности.
Kamil Jarosz 24 окт. 2018, в 12:56
0

@KamilJarosz Хорошо, большое спасибо! Например, весь смешанный код в файле app.config.js всегда включается во все страницы, и для каждой страницы я включаю app.js с интересующим меня экземпляром Vue.
Elwyn 24 окт. 2018, в 13:06

Показать ещё 11 комментариев

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Итак, вы создаете экземпляр Vue на каждой странице и спрашиваете, почему Vue создается на каждой странице? При вызове new Vue(); Вы создаете экземпляр Vue.
Я не думаю, что это то, что спрашивает ОП. Они называют init в mounted . Насколько мне известно, mounted не должен вызываться, если корневого HTML-элемента не существует на странице.
@KamilJarosz Я почти уверен, что что-то пропустил, хорошо, но element здесь, чтобы сказать VueJs: нужно использовать или нет. Нет? Я имею в виду, метод init() который я использовал, находится в mounted части ...
Вы понимаете это правильно, но Vue будет создан независимо от того, существует элемент или нет. Он просто не будет подключен к нулевому (несуществующему) элементу.
@Bert Хм ... Это грустные новости, я имею в виду .. Я думал, что это была цель element . Я видел ваше решение, большое спасибо. Но я нахожу это немного "уродливым", потому что я хотел только чистый код VuejS. Я единственный, кто использует VueJS на нескольких страницах?
Нет, я думаю, что люди либо не загружают скрипт на страницах, где он не нужен, либо у них нет проблем с использованием javascript. К сожалению, я не вижу другого пути обойти это.
@Bert Честно говоря, я просто заменил весь свой код jQuery, полный селекторов DOM, на этот код VueJS, который мне показался более красивым и мощным.
Vue определенно приятнее работать с (IMO), чем с jQuery, поэтому я считаю, что это хороший выбор. Однако не существует простого способа отказаться от создания объекта. Объект, переданный new Vue является просто объектом инициализации. Объект Vue будет создан несмотря ни на что; Именно так работает JavaScript.
@Elwyn Elwyn, если в вашем приложении несколько страниц, почему бы просто не разделить экземпляры Vue для этих конкретных страниц и использовать соответствующие сценарии для каждого, вместо того, чтобы загружать файлы app.js одного размера для каждой страницы? Похоже, вы пытаетесь запустить многостраничное приложение с одностраничными скриптами.
@KamilJarosz Это именно то, что я делаю, да, и я думал о разделении, теперь, когда я понимаю ... Но что я делаю с частью mixing ? Мне нравится идея сервисных функций в mixin . О, и я также повторно использую компоненты .. Это я также объявил в app.js
@Elwyn Элвин, ты все еще можешь использовать миксин. Вы только добавляете миксин, когда создаете экземпляр Vue. Поэтому, когда вы разделяете свой код и попадаете на одну из страниц, на которой создается экземпляр Vue, вы просто добавляете свой экземпляр Vue для расширения его функциональности.
@KamilJarosz Хорошо, большое спасибо! Например, весь смешанный код в файле app.config.js всегда включается во все страницы, и для каждой страницы я включаю app.js с интересующим меня экземпляром Vue.

Bert · Accepted Answer · 2018-10-24T09-57-00.000Z

Похоже, у вас есть сценарий, который загружается на каждую страницу, создавая новые объекты Vue, независимо от того, отображаются ли элементы, связанные с Vues.

Vue создаст экземпляры, даже если элемент, который вы его создаете, не существует.

В этом случае вы можете просто проверить, существуют ли элементы до создания Vue.

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

Спасибо за этот обходной путь. Но мне не нравится термин «обходной путь», потому что это означает, что то, чего я хочу достичь с помощью VueJS, не правильно.