구성 요소를 초기화해야 하는 창/문서 이벤트를 선택하십시오.

구성 요소를 초기화해야 하는 창/문서 이벤트를 선택하십시오.

작은 예시 컴포넌트(다음 예 모두)

<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>

Vue 컴포넌트를 로드해야 하는 메인 페이지의 DOM 요소 마크업:

<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: Wait for window loaded:

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

로드 후: "Initialized vue component" / 클릭 시: "클릭된 요소"

---

예 3: 또는 문서 로드를 기다리시겠습니까?

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

로드 후: "Initialized vue component" / 클릭 시: "클릭된 요소"

---

예 4: $mount

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

로드 후: "Initialized vue component" / 클릭 시: "클릭된 요소"

---

예 5: DOM Content Loaded 후 $mount

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

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

로드 후: "Initialized vue component" / 클릭 시: "클릭된 요소"

---

질문:

• 초기화 시 vue 컴포넌트에 차이가 있습니까? (DOMContentLoaded와 window.loaded)
• 첫 번째 예에서 클릭 이벤트가 실행되지 않는 다른 이유가 있습니까?

언급URL : https://stackoverflow.com/questions/55258946/on-which-window-document-event-should-a-component-be-initialized