Instance (인스턴스)
인스턴스 정의 🧐
- Vue.js로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
인스턴스 형식 (문법) 📗
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello, Vue!'
},
...
})
- el 속성 : Vue로 만든 화면이 그려지는 시작점
(Vue 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 DOM 요소를 반드시 지정해야 함)
인스턴스 생성자 🦾
- Vue로 개발할 때 필요한 기능들을 생성자에 미리 정의해놓고 사용자가 그 기능을 재정의하여 편리하게 사용할 수 있게 생성자를 사용
인스턴스가 화면에 적용되는 과정 👩💻
- Vue 라이브러리 파일 로딩
- 인스턴스 객체 생성
- 특정 화면 요소에 인스턴스 부착
- 인스턴스 내용이 화면 요소로 변환
- 변환된 화면 요소를 사용자가 최종 확인
인스턴스 라이프 사이클 🌎
라이프 사이클 : 인스턴스의 상태에 따라 호출할 수 있는 속성
beforeCreate
- 인스턴스가 생성되고(이벤트 및 라이프 사이클 초기화 후) 가장 처음으로 실행되는 라이프 사이클
- data 속성, methods 속성 정의되지 않음 → data, methods 속성에 접근 불가
- DOM과 같은 화면 요소에 접근 불가
created
- data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계
( 화면에 반응성 주입 된 다음 실행 ) - DOM과 같은 화면 요소에 접근 불가 (인스턴스가 화면 요소에 부착 전)
- 서버에서 데이터를 요청해서 받아오는 로직을 수행하기 좋음
beforeMount
- created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환하여 el 속성에 지정한 DOM에 인스턴스를 부착하기 전 호출되는 단계
- render() 함수가 호출되기 직전의 로직을 추가하기 좋음
mounted
- el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계 (인스턴스에 정의한 속성들이 화면에 치환)
- template 속성에 정의한 DOM에 접근할 수 있음
- 화면 요소를 제어하는 로직을 수행하기 좋은 단계
beforeUpdate
- 관찰하고 있는 데이터가 변경돼서 가상 DOM으로 화면을 다시 그리기 전에 호출되는 단계로 데이터 변경 시에만 동작
- 변경 예정인 새 데이터에 접근 가능, 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음
- 데이터 값을 갱신하는 로직을 추가하기 좋은 단계
updated
- 데이터가 변경되고 나서 가상 DOM으로 다시 화면을 그리고 나면 실행되는 단계
- 변경 데이터의 DOM과 관련된 로직을 추가하는 것이 좋음
( 이 단계에서 데이터 변경 시, 무한 루프 우려 → computed, watch와 같은 속성 사용 )
beforeDestroy
- Vue 인스턴스가 파괴되기 직전에 호출되는 단계
- 인스턴스에 접근 가능, Vue 인스턴스의 데이터를 삭제하기 좋은 단계
destroyed
- Vue 인스턴스가 파괴되고 나서 호출되는 단계
- 인스턴스에 정의한 모든 속성 제거, 하위에 선언한 인스턴스들 또한 모두 파괴
출처 📝
- Vue.js 인스턴스
- Do it! Vue.js 입문 - 장기효
위의 내용은 Vue.js를 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌
FrontEnd Developer