Vue - 라이프 사이클

 

 

 

Vue 라이프 사이클

인스턴스의 상태에 따라 호출 할 수 있는 속성들을 Life Cycle(생명주기)라 한다.

라이프사이클에 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(Life Cycle Hook)이라고 한다.

뷰 인스턴스도 객체이기 때문에 생명주기를 가지는데

속성의 종류는 

 

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

이렇게 8종으로 나뉜다.

뷰 라이프사이클 이해도 (한글)

 

1. Creation [컴포넌트 초기화 단계]

Creation 단계에서 실행되는 훅(hook)들이 라이프 사이클 중에 가장 처음 실행된다.

이 단계는 컴포넌트가 돔에 추가되기 전인데

서버 렌더링에서도 지원하는 훅이다.

 

beforeCreate

-인스턴스가 생성되고 나서 가장 처음으로 실행 되는 라이프 사이클

뷰 인스턴스의 Data와 Methods 속성이 정의 되어 있지 않고 화면DOM에 접근할 수 없다.

 

 

 

 

 

2. Mounting [돔(DOM) 삽입 단계]

 

 

created

-Data속성과 Methods 속성이 정의되었기 때문에 두 속성값에 접근하는 로직을 구현해도 된다.

뷰 인스턴스의 Data와 Methods 속성이 정의 되어 있지 않고 화면DOM에 접근할 수 없다.

 

export default {
    data () {
      return {
        title: ''
      }
    },
    computed: {
      titleComputed() {
        console.log('I change when this.property changes.')
        return this.property
      }
    },
    created () {
      //can use Data(this.title, this.titleComputed ...), events(vm.$on, vm.$once, vm.$off, vm.$emit)
      //don't use $el
    }
  }

 

beforeMount

템플릿과 render()가 컴파일된 후 랜더링이 일어나기 직전의 단계. 

created 이후에 template속성에 지정한 마크업 속성을 render()함수로 변환한 후

el속성에 지정한 화면 요소에 인스턴스를 부착하기 직전 즉, DOM이 그려지는 시점 

 

호출되기 때문에 화면에 붙이기 전 실행해야 할 코드를 구현하면 된다. ( 실제로 잘 사용 되지 않는다. )

그리고 서버사이드 렌더링 시에는 호출되지 않는다.

 

export default {
  beforeMount() {
    console.log(`this.$el doesn't exist yet, but it will soon!`)
  }
}

 

[서버사이드렌더링]

서버로부터 새로운 페이지에 대한 요청을 받을때  View가 어떻게 보여질지 또한 서버에서 해석하여 보내주는데 이러한 방식을  서버사이드 렌더링방식 이라고한다.   SPA방식, 처음 하나의빈 페이지만 서버측에서 제공하고, View에 대해서는 Client에서 Javascript를 통해 랜더링 하는 방식을 클라이언트사이드 렌더링방식이라고 한다.   즉, 서버의 요청으로 만들진것을 뜻한다.

 

mounted

El 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후 호출되는 단계

즉, (컴포넌트, 템플릿 랜더링 된 DOM에 접근할 수 있다.)

 

모든 하위 컴포넌트가 마운트된 상태를 보장하지는 않는다. 서버렌더링에서는 호출 되지 않는다.

 

<script>
export default {
  mounted() {
    console.log(this.$el.textContent) // can use $el
    this.$nextTick(function () {
      // 모든 화면이 렌더링된 후 실행합니다.
    })
  }
}
</script>

mounted에서 유의할 점은, 부모와 자식 관계의 컴포넌트에서 우리가 생각한 순서로 mounted가 발생하지 않는다.

즉 부모의 mounted가 자식의 mounted보다 먼저실행되지 않는다.(오히려 반대)

 

그래서 주의 할 점은 DOM에 인스턴스가 부착되자마자 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해

추가된 화면 요소들이 최종 HTML코드로 변환되는 시점과는 다룰 수 있다.

 

https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4

Vue.js 2.0 라이프사이클 이해하기

https://hyeooona825.tistory.com/40