1. Vue Lifecycle

• https://vuejs.org/guide/essentials/lifecycle.html
  

  각 Vue 구성 요소 Instance는 생성될 때 일련의 초기화 단계를 거치게 된다. 예를 들어, 데이터 관찰(Create)을 설정하고 템플릿을 컴파일하고 DOM에 인스턴스를 마운트(Mount)하고 데이터가 변경될 때 DOM을 업데이트(Update)해야 한다. 그 과정에서 Lifecycle Hooks 이라는 기능도 실행하여 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공한다.

1-1. Vue Instance

• 모든 Vue.js 앱은 Vue를 사용하여 루트 Vue 인스턴스를 생성하여 부트스트랩 됨
• Instance는 Vue.js 로 화면을 개발하기 위해 꼭 생성해야 하는 필수 단위
• new Vue({...}) 로 선언하여 만들어진 객체를 Vue 인스턴스라고 함

<script>
new Vue({
  // instance 생성
  // instance option properties
});
</script>

1-2. Composition API

• https://sungjaecloud.tistory.com/346

  컴포지션(Composition) API는 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue3 버전에 추가된 함수 기반의 API이다. 컴포넌트 API가 생긴 이유는 Vue는 프로젝트 규모가 커질수록 관리하기 힘든 단점과 컴포넌트의 계층구조가 복잡할수록 코드에 대한 추적 및 관리가 힘든 점을 보안하기 위해 등장하게 되었다.

1-3. 액세스할 수 있는 옵션

• beforeCreate 및 created(setup() 메서드 자체로 대체됨)를 제외하고 설정 메소드에서 액세스할 수 있는 옵션 API Lifecycle Hooks 중 9개
  • onBeforeMount : mounting이 시작되기 전에 호출
  • onMounted : 컴포넌트가 mount될 때 호출
  • onBeforeUpdate : 반응형 데이터가 변경될 때와 re-render되기 전에 호출
  • onUpdated : re-render된 후에 호출
  • onBeforeUnmount : Vue 인스턴스가 파괴(삭제)되기 전에 호출
  • onUnmounted : 인스턴스가 파괴(삭제)된 후 호출됨
  • onActivated : 보관된 구성 요소가 활성화되면 호출
  • onDeactivated : 보관된 구성 요소가 비활성화되면 호출
  • onErrorCaptured : 하위 구성 요소에서 오류가 캡처되면 호출

1-4. 업데이트된 항목

• Vue 2 코드를 Vue 3 Lifecycle Hooks 로 업데이트된 항목
  • beforeCreate -> use setup()
  • created -> use setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

2. Vue Component

• props, watch 가 많아지면 유지보수가 어려움 > 대용량 데이터의 처리 방법과 성능 최적화 방법 (Vue.js Performance)

2-1. props

• props 가 많다는 것은 이미 부모 컴포넌트(Parent Component)에서 많은 속성을 전달하고 있다는 것
• props 는 해당 컴포넌트에서 직접적으로 변경 불가능 > 이미 넘어온 props 를 변경하려면 바인딩 되어있는 props 를 data 에 재 바인딩해야 하는 경우가 많음
  • watch 와 같은 감시자와 상위 컴포넌트로 이벤트를 전달하는 $emit 이 많아짐

2-1. watch

• watch 가 많다는 것은 이미 해당 컴포넌트에서 반강제적으로 반응적인 모델이 필요하다는 것
• watch 가 많아지게 되면 해당 컴포넌트를 다른 곳에 바인딩하였을 때 의도치 않은 동작을 야기할 수 있음
• 특히나 Vue.js 의 반응적 모델은 Application 의 성능에 직접적인 연관 > watch 최소화