Vue 라이프사이클(lifeCycle) 이해하기

들어가기 전 , Vue 기초상식

• Vue : Vuej는 날이 갈수록 진화하고 있는 웹콘텐츠들 및 웹사이트들(Youtube, Facebook, instagram 등)을 소비하는 사용자들을 위한 프론트엔드 부분을 더 쉽게 만들기 위해 만들어졌다.

• Vue Instance : Vue로 화면을 개발하기 위해 필수 생성해야하는 기본 단위.
  Instance 생성 방법🔽

  <script>
    new Vue({ //생성자 호출
      el:'#app',
      data: {...}
     })
  </script>

  • 생성자 : 새 객체 생성 시 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장하고 사용하는 방법
    el, data, template, methods, created 등 요러가지 속성이 있음.
  • Instance 유효범위 : HTML 범위 내에서만 적용. 보통 범위는 el 속성에 의해 정해짐.
  • Instance 화면 적용 순서
    ㄴ Vue 라이브러리 로딩 -> Instance 생성 -> 특정 화면 el에 Instance 연결 -> el에 Instance 내용 적용 -> 적용화면 사용자 노출
    
    

라이프사이클(Life Cycle) 이란?

• Vue Instance 나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단개의 과정을 거치게 되는데, 이를 '라이프사이클(Lifecycle)'이라고 함.
  Instance 생성 후 노출되고 사라지기까지의 단계.
  • 생성(create) - DOM 부착(mount) - 업데이트(update) - 삭제 (destroy) 의 과정.
  • 이 과정에서 훅(Hook)을 할 수 있도록 API를 제공.
    ㄴ 훅(Hook)?
    사용자가 특정 단계(초기화 단계)에서 자신의 코드를 추가할 수 있는 함수.
  • 종류 : beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed