Блог

Главная - Вопросы по программированию - В каком окне / событии документа должен быть инициализирован компонент?

В каком окне / событии документа должен быть инициализирован компонент?

#javascript #vue.js #vuejs2 #vue-component

#javascript #vue.js #vuejs2 #vue-компонент

Вопрос:

Небольшой пример компонента (для всех следующих примеров):

 <template>
  <div>
    <h1 v-on:click="handleClick">Test</h1>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class TestComponent extends Vue {
  created() {
    console.log("Initialized vue component");
  }

  public handleClick() {
    console.log("Clicked element");
  }
}
</script>

Разметка элемента в DOM главной страницы, куда должен быть загружен компонент Vue:

 <div id="test"></div>

Пример 1: Создание экземпляра компонента в main.js без учета каких-либо событий окна / документа:

 import Vue from "vue";
import TestComponent from "./TestComponent";
const test = new Vue({
  el: '#test',
  components: {
    'test-component': TestComponent
  }
});

Вывод на консоль:

После загрузки: «Инициализированный компонент vue» / По щелчку: ничего

Пример 2. Дождитесь загрузки окна:

 window.addEventListener("load", function(event) {
  const test = new Vue({
    el: '#test',
    components: {
    'test-component': TestComponent
    }
  });
});

После загрузки: «Инициализированный компонент vue» / При нажатии: «Выбранный элемент»

Пример 3: Или дождаться загрузки документа?

 document.addEventListener("DOMContentLoaded", function () {
  const test = new Vue({
    el: '#test',
    components: {
      'test-component': TestComponent
    }
  });
});

После загрузки: «Инициализированный компонент vue» / При нажатии: «Выбранный элемент»

Пример 4: $mount

 const test = new Vue({
  components: {
    TestComponent
  },
  render: (h) => h(TestComponent),
}).$mount('#test');

После загрузки: «Инициализированный компонент vue» / При нажатии: «Выбранный элемент»

Пример 5: $mount после DOMContentLoaded

 const test = new Vue({
  components: {
    TestComponent
  },
  render: (h) => h(TestComponent),
});

document.addEventListener("DOMContentLoaded", function () {
  test.$mount('#test');
});

После загрузки: «Инициализированный компонент vue» / При нажатии: «Выбранный элемент»

Вопросы:

  • Есть ли разница для компонента vue во времени инициализации? (DOMContentLoaded vs. window.loaded)
  • Есть ли другая причина, по которой событие click не запускается в первом примере?

Комментарии:

1. Не могли бы вы, пожалуйста, показать код (макет), в котором вы добавляете свой компонент на страницу? Или вы используете его как-то по-другому?

2. ДА. Я добавил выше. Это просто div с идентификатором «test». Я предполагаю, что я делаю что-то неправильно при правильном монтировании элемента. Если я запускаю новый проект с помощью vue cli, нет необходимости учитывать какие-либо глобальные события загрузки или готовности.

3. Все еще не ясно, как вы загружаете свой компонент в этот div. Я не вижу никакого кода, загружающего компонент именно в этот div.

4. Я думал, что el: #test монтирует компонент к элементу dom с идентификатором test. Итак, я предполагаю, что я монтировал компонент неправильно. Я добавил два других примера с помощью $mount. Я думаю, это отвечает на мой вопрос. Поскольку щелчок срабатывает в обоих направлениях, я полагаю, нет необходимости ждать, пока загрузится Domcontent?

5. Какие проблемы пытаются решить эти вопросы?