Vue.js 핵심내용 정리하기

Instance VS Component

• Vue Instance
  • 뷰 인스턴시는 뷰로 화면을 개발하기 위해 필수적으로 생성하는 기본단위

  • 인스턴스 생성 방법

      new Vue({ // 인스턴스
          el: '#app', // el 속성
          data: {     // data 속성
              message: 'Hello'
          }
      })
    

  • new Vue() 는 생성자
    • 뷰 라이브러리를 로딩하고 나면 접근가능
    • el, data는 미리 정의되어 있는 속성
    • 그 외에 template, methods, created 속성
• new Vue() 후 인스턴스 옵션 적용 과정
  • Vue Library Loading
  • Create Instance
  • Attach Inmstance To Element
  • 인스턴스 내용이 화면 요소로 변환
  • 변환된 화면 요소를 사용자가 최종 확인
• Vue Instance 의 Life Cycle
  • 크게 생성, 부착, 갱신, 소멸 상태를 거친다.
  • 인스턴스 생성
    • 이벤트 및 라이프사이클 초기화
    • beforeCreate
      • data, methods 속성은 아직 정의되지 않음
    • 화면에 반응성 주입
    • created
    • el, template 속성 확인
    • template 속성 내용을 render()로 변환
    • beforeMount
    • $el 생성 후 el 속성 값을 대입
    • mounted
  • 인스턴스를 화면에 부착
    • 인스턴스의 데이터 변경
    • beforeUpdate
    • 화면 재 랜더링 및 데이터 갱신
    • updated
  • 인스턴스 내용 갱신
    • 인스턴스 접근 가능
    • beforeDestory
    • 컴포넌트, 인스턴스, 디렉티브 등 모두 해제
    • destoryed
  • 인스턴스 소멸