App.vue 마운트 할 때 import없이도 함수를 실행할 수 있는 이유?

App.vue파일에서

onMounted() => {
...
...
....
}

App.vue파일이 main.ts가 index.html(entry point)에서 스크립트로 실행될 때 마운트 되면서 onMounted()에 등록된 함수가 실행된다.

ref<데이터타입>에서 정의한 변수의 value값을 주면 const로 선언한 변수라도 값을 변경할 수 있다.

import없이 마운트 시 onMounted()의 함수를 호출할 수 있는 이유는 window.api.함수명() 함수과 관련이 있다.

• 이 함수는 전역 객체인 window에 등록된 메서드이기 때문에
  Vue 컴포넌트나 js파일 어디서든 window객체를 통해 접근할 수 있다.

window.api 객체 설정

// main.js 또는 별도의 초기화 파일에서
window.api = {
  helloWorld() {
    return "Hello, World!";
  },
  dicomParser() {
    // DICOM 파싱 로직 구현
    return "Parsed DICOM data";
  }
};

App.vue 파일에서 호출

<template>
  <div>
    <p>{{ helloWorld }}</p>
    <p>{{ dicomParserResult }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const helloWorld = ref(null);
    const dicomParserResult = ref(null);

    onMounted(() => {
      helloWorld.value = window.api.helloWorld();
      dicomParserResult.value = window.api.dicomParser();
    });

    return {
      helloWorld,
      dicomParserResult
    };
  }
};
</script>