Почему установленный крюк срабатывает, даже если el не существует в Vue?

Question

У меня есть простой экземпляр vue:

var vm = new Vue({
    el: "#myEl",
    data: {
        parent: null,
        posts: [],
        total: 0,
        currentPage: 0
    },
    mounted: function () {
        alert("mounted");
    }
});

Все хорошо, когда на странице существует #myEl, но если его нет, крюк монтирования срабатывает в любом случае.

Но почему?Нет элемента для монтирования экземпляра, так почему же он монтируется?Что я должен сделать vue-way, чтобы проверить существование el?

Answer 1

Согласно исходному коду , если элемент не найден, выдается предупреждение и вместо него создается <div>.

Вы несете ответственность за проверку, если элементсуществует или нет (document.querySelector()) до создания экземпляра компонента.

Answer 2

От Эвана Ю

Когда el недоступен, компонент монтируется в памяти (аналогично вызову $ mount () без аргументов).

В консоли есть предупреждения о том, что целевой el не может быть найден.

Если вы не хотите, чтобы это происходило, оберните экземпляр в проверку для элемента, например

if(document.querySelector('#el')){ ... }

Answer 3

Способ, которым я делаю это, хотя это и не может быть vue-way, это просто запросить элемент перед попыткой монтировать экземпляр.Это будет выглядеть примерно так:

const element = document.querySelector("#myEl");

if (element) {
  var vm = new Vue({
    el: element,
    ...
  });
}