Vue Application 인스턴스

 

- 어플리케이션 인스턴스 생성하기

• createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성
• 인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있다.
• 어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 연결을 허용

// 어플리케이션 인스턴스 생성
const app = Vue.createApp({ /* options */ });

// 인스턴스 메소드
const app = Vue.createApp({});
app.component('SearchInput', SearchInputComponent);
app.directive('focus', FocusDirective);
app.use(LocalePlugin);

// 인스턴스 메소드 체이닝
Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin);

---

- 최상위(Root) 컴포넌트

• createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용
• 루트 컴포넌트는 어플리케이션을 mount할 때, 렌더링의 시작점으로 사용
• mount는 어플리케이션을 반환하지 않고 루트 컴포넌트 인스턴스를 반환
• vm은 ViewModel의 줄임말

const RootComponent = { /* options */ };
const app = Vue.createApp(RootComponent);
const vm = app.mount('#app');

 

[ 참고자료 ] 

https://v3.ko.vuejs.org/guide/instance.html#%E1%84%8B%E1%85%A5%E1%84%91%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%84%8F%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%89%E1%85%A7%E1%86%AB-%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%89%E1%85%B3%E1%84%90%E1%85%A5%E1%86%AB%E1%84%89%E1%85%B3-%E1%84%89%E1%85%A2%E1%86%BC%E1%84%89%E1%85%A5%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5

어플리케이션 & 컴포넌트 인스턴스 | Vue.js