Vue.js - 뷰 인스턴스, 라이프 사이클

뷰 인스턴스 생성자

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.

생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능을 미리 특정 객체에 저장해 놓고, 새로운 객체를 생성할 때 기존 기능을 활용하거나 확장하여 사용한다.

뷰 인스턴스 옵션 속성

인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다.

[❗]
css 선택자 중 # 선택자는 해당 아이디를 가진 돔 요소를 검색할 때 사용한다. 그리고 .선택자는 해당 클래스를 가진 돔 요소를 검색할 때 사용한다.

뷰 인스턴스의 유효 범위
뷰 인스턴스를 생성하면 html의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다. 이를 인스턴스의 유효 범위라고 한다.

뷰 인스턴스 라이프 사이클
라이프 사이클 : 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명주기
인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이플 사이클 속성이라고 하며, 각 라이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅!

인스턴스의 생성 -> 생성된 인스턴스를 화면에 부착 -> 화면에 부착된 인스턴스의 내용 갱신 -> 인스턴스 제거

• beforeCreate : 처음으로 실행, data 속성과 methods 속성이 인스턴스에 정의되어있지 않음. 돔에도 접근 불가
• created : beforeCreate 라이프 사이클 다음 단계, data 속성과 methods 속성이 정의되었기 때문에 this.date 또는 this.fetchData()와 같은 로직 사용 가능, 하지만 아직 인스턴스가 화면에 부착되기 전이므로 template 속성에 정의된 돔 요소로는 접근 불가
• beforeMount : created 단계 이후 template 속성에 지정한 화면 돔에 인스턴스를 부착하기 전에 호출됨. render()함수가 호출되기 직전의 로직을 추가하기 좋음
• mounted : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출됨. 돔요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋다. But 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하휘 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html 코드로 변환되는 시점과 다를 수 있음
• beforeUpdate : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고, 인스턴스에 정의한 속성들이 화면에 치환된다.
• updated : 데이터가 변겨오디고 나서 가상 돔으로 다시 화면을 그리고나면 실행됨. 데이터 변경 후 화면 요소제어와 관련된 로직을 추가하기 좋다. 하지만 여기서 데이터를 변경하면 무한루프에 빠질 수도 있음 😓 따라서 데이터 값을 갱신하는 로직은 beforeUpdate에 추가해야 함!
• beforeDestory : 뷰 인스턴스가 파괴되기 전에 호출됨.
• destroyed : 뷰 인스턴스가 파괴되고 나서 호출되는 단계

뷰를 제대로 사용하려면 뷰 인스턴스 라이프 사이클을 잘 익혀야 한다!

[Reference]

Do it Vue.js 입문(이지스퍼블리싱)