Vue 인스턴스와 라이프사이클 [패스트캠퍼스 챌린지 29일차]

인스턴스와 라이프사이클

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

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

어플리케이션 인스턴스 생성

모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다

const app = Vue.createApp({ /* options */ })

인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있음.

예를들어, <div id="app"></div>에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 전달해야함

아래는 예전에 썼던 방법

Vue.createApp({ /*option*/ }).mount('#app')

메소드 체이닝 사용 가능

어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 연결(chaining)을 허용함. 아래처럼

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

최상위 Root 컴포넌트

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

여기서 얘기하는 루트 컴포넌트라는 것은 App.vue에 해당하는 개념이라고 보면 됨.

루트 컴포넌트는 프로젝트를 진행할 때 렌더링이 되는 시작점으로 사용됨.

App.vue를 시작하는 컴포넌트로서 거기에다가 새로운 .vue 파일들(컴포넌트들)을 추가적으로 연결해서 사용 가능함.

App.vue같은 뷰 컴포넌트의 밖에서도 컴포넌트 안에 있는 내용들을 확인할 수 있음.

라이프사이클 훅

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

각 컴포넌트는 생성될 때 일련의 초기화 단계를 거침.

예를들어 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트(html에 연결), 데이터 변경 시 DOM을 업데이트해야함.

그 과정에서 라이프사이클 훅이라 불리우는 함수도 실행하여, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공함.

예를들어, created 훅은 인스턴스가 생성된 후에 코드를 실행하는데 사용됨

Vue.createApp({
  data() {
    return { count: 1 }
  },
  created() {
    // `this` points to the vm instance
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

인스턴스 라이프사이클에는 mounted, updated, unmounted 과 같은 다른 훅도 존재함.

모든 라이프사이클 훅에서는 Vue인스턴스를 가리키는 this 컨텍스트와 함께 호출됨

라이프사이클 다이어그램

이미지 짱중요

가장 중요하게 봐야할 녀석

• created

  컴포넌트가 연결이 된 상태로 가장 빠르게 만날 수 있는 라이프 사이클 훅

• mounted

  실제로 화면에 내용이 그려진(랜더링) 직후에 바로 확인할 수 있는 라이프 사이클

---

내 뷰 템플릿이 뭔가 이상함
갈아엎고 다시 해야지
쌤은 버전 관리까지 다 해놨던데
언제 하신거죠
ㅠ

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online