vue 인스턴스 라이프싸이클

뷰 인스턴스 라이프싸이클

• 라이프싸이클 속성에는 크게 인스턴스 생성 / 부착 / 갱신 / 소멸로 나눌 수 있고,

• 세부적으로는 아래 그림과 같이 beforeCreate, created, beforeMount, mounted 등 8가지로 나뉜다.

beforeCreate

• 인스턴스 생성 후, 가장 먼저 실행되는 라이프싸이클 단계

• 해당 단계에서는 아직 인스턴스에 data와 methods 속성이 정의되어 있지 않다.

• 또한, 돔과 같은 화면 요소에도 접근 할 수 없다.

created

• 인스턴스의 data와 methods 속성 등이 정의된 후에 실행되는 라이플싸이클 단계

• 단, 아직 인스턴스가 화면에 부착되지 않았기 때문에, template 요소에 정의된 돔 요소에는 접근할 수 없다.

• 주로 서버에 데이터를 요청하여 받아오는 로직을 수행하기에 좋다.

beforeMount

• template 속성에 지정한 마크업 내용을 화면에 그리기 위해 render() 함수로 변환하고, el 속성에 지정한 돔에 인스턴스를 부착하기 전에 호출되는 라이플싸이클 단계

mounted

• el 속성에서 지정한 돔에 인스턴스가 부착되고 난 후에 실행되는 라이플싸이클 단계

• 돔 요소에 접근할 수 있으므로, 화면 요소를 제어하는 로직을 수행하기 좋다.

  • 다만, 돔에 인스턴스가 부착되자마자 실행되기 때문에 하위 컴포넌트나 외부 라이브러리의 화면 요소가 그려지는 시점이 다를 수있다.

  • $nextTick()을 활용하여 해결할 수 있다.

beforeUpdate

• el 속성에서 지정한 화면 요소에 인스턴스의 속성들이 치환되는 라이플싸이클 단계

• 치환 된 값은 뷰 반응성을 위해 감시되고, 이를 데이터 관찰이라고 한다.

• 따라서, 해당 단계는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 실행된다.

• 변경 예정인 새 데이터에 접근 할 수 있지고, 변경 예정인 데이터 값과 관련된 로직을 미리 넣을 수 있다.

  • 단, 값을 변경하더라도 화면이 다시 그려지지 않는다.

updated

• 데이터 변경으로 인해, 가상 돔으로 화면을 다시 그리고 나면 실행되는 라이플싸이클 단계

• 데이터 변경 이후 화면 요소 제어와 관련된 로직을 추가하기 좋다.

• 단, 해당 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에, 값을 변경하려면 computed나 watch와 같은 속성을 이용해야 한다.

  • 가급적이면 데이터 값 갱신은 beforeUpdate에서 처리한다.

beforeDestroy

• 뷰 인스턴스가 파괴되기 직전에 실행되는 라이플싸이클 단계

• 아직 인스턴스가 파괴되지 않아서, 접근이 가능하다.

• 뷰 인스턴스의 데이터를 삭제하기 좋다.

destroyed

• 뷰인스턴스가 파괴되고 나서 실행되는 라이플싸이클 단계

• 하위 인스턴스들 또한 모두 파괴된다.