VUEJS 2버전 라이프사이클 정리

개발/FRONT

by 강아지찹쌀떡 2023. 9. 9. 20:02

라이프사이클이 중요하다고 해서 봤는데 그냥 통째로 암기하는게 나을거 같다.

그래도 까먹을수 있으니 블로그에 적어놓고 기억안날때마다 봐야지

라이프사이클 메소드
- beforeCreatedate,method 속성이 아직 인스턴스에 정의되어 있지 않다.
- DOM과 같은 화면 요소에도 접근 불가하다.
- 인스턴스가 생성되고 나서 가장 처음 실행되는 라이프 사이클
- created
  1. data,method 속성이 인스턴스에 정의되어 있다.
  2. 정의된 값에 접근하여 로직을 실행할 수 있다.
  3. 다만, 화면에 부착 전이라 template속성에 정의된 DOM요소로 접근 불가하다.
  4. 서버에 데이터를 요청해 받아오는 로직을 수행하기 좋다.
- beforeMountrender()함수 : 자바스크립트로 화면에 DOM을 그리는 함수
- template 속성에 지정한 마크업 속성은 render() 함수로 변환후, el 속성에 지정한 화면 요소(DOM)에 인스턴스를 부착하기 전에 호출되는 단계
- mountedtemplate 속성에 정의한 화면 요소(DOM)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계
- el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계
- beforeUpdate
  1. 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
  2. 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다.
- updated데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계computed,watch같은 속성을 사용해야 한다.
- 데이터 값을 갱신하는 로직은 가급적 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면 요소와 관련된 로직을 작성
- 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질수 있어서 값을 변경 하려면
- 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계
- beforeDestroy아직 인스턴스에 접근할 수 있어서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.
- 뷰 인스턴스가 파괴되기 직전에 호출되는 단계
- destroyed정의한 모든 속성이 제거되고 하위 선언한 인스턴스들 또한 모두 파괴됨
- 뷰 인스턴스가 파괴되고 나서 호출되는 단계