글

라벨이 vue인 게시물 표시

vue 인스턴스 라이프싸이클

이미지
뷰 인스턴스 라이프싸이클 라이프싸이클 속성에는 크게 인스턴스 생성 / 부착 / 갱신 / 소멸로 나눌 수 있고, 세부적으로는 아래 그림과 같이 beforeCreate, created, beforeMount, mounted 등 8가지로 나뉜다. beforeCreate 인스턴스 생성 후, 가장 먼저 실행되는 라이프싸이클 단계 해당 단계에서는 아직 인스턴스에 data와 methods 속성이 정의되어 있지 않다. 또한, 돔과 같은 화면 요소에도 접근 할 수 없다. created 인스턴스의 data와 methods 속성 등이 정의된 후에 실행되는 라이플싸이클 단계 단, 아직 인스턴스가 화면에 부착되지 않았기 때문에, template 요소에 정의된 돔 요소에는 접근할 수 없다. 주로 서버에 데이터를 요청하여 받아오는 로직을 수행하기에 좋다. beforeMount template 속성에 지정한 마크업 내용을 화면에 그리기 위해 render() 함수로 변환하고, el 속성에 지정한 돔에 인스턴스를 부착하기 전에 호출되는 라이플싸이클 단계 mounted el 속성에서 지정한 돔에 인스턴스가 부착되고 난 후에 실행되는 라이플싸이클 단계 돔 요소에 접근할 수 있으므로, 화면 요소를 제어하는 로직을 수행하기 좋다. 다만, 돔에 인스턴스가 부착되자마자 실행되기 때문에 하위 컴포넌트나 외부 라이브러리의 화면 요소가 그려지는 시점이 다를 수있다. $nextTick()을 활용하여 해결할 수 있다. beforeUpdate el 속성에서 지정한 화면 요소에 인스턴스의 속성들이 치환되는 라이플싸이클 단계 치환 된 값은 뷰 반응성을 위해 감시되고, 이를 데이터 관찰이라고 한다. 따라서, 해당 단계는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 실행된다. 변경 예정인 새 데이터에 접근 할 수 있지고, 변경 예정인 데이터 값과 관련된 로직을 미리 넣을 수 있...