Vue 생명주기 (lifecycle)

Vue 생명주기

컴포넌트가 생성 후, 소멸될 때까지의 주기가 있습니다.
크게 create, mount, update, destory 로 나뉘며, 각각 before 를 가지고 있다고 생각하면 된다.
자주 사용하는 라이프사이클 함수로는 created, mounted, (beforeUpdate, update), destory 가 있습니다.

created

created 는 인스턴스가 생성되면 발생하는 라이프 사이클 함수로 처음에 실행하고자 하는 동작을 넣으면 된다.
하지만, 돔이 그려지지 않은 상태라는 것을 참고하자.

mounted

mounted 는 돔에 접근할 수 있는 라이프사이클로써 비동기로 인해 돔이 다그려지지 않는 경우도 발생한다. 그런 경우, $.nextTick() 을 이용하면 됨.

update

update 는 이제 어떤 값이 변경 이후 발생하는데 필자는 잘 쓰지 않음. 특히 update 에서 만약 값을 변경하는 경우, 예외처리를 제대로 해주지 않으면 다시 update 가 발생하면서, 무한루프 발생함.

destory

destory 는 컴포넌트가 제거되면서 발생하는 사이클 함수로 제거 후, 할 동작에 대해 해주면 됨.

간단한 소스

  created () {
    ...
  },
  mounted () {
    ...
  },
  updated () {
    ...
  },
  beforeDestroy(){
    ...
  }