[vuex 공부] life cycle

https://hyeooona825.tistory.com/40

[vue.js] vue 인스턴스 생명주기 (life cycle)

 

vuex life cycle

created

data, methods 속성에 접근하는 로직 구현 가능

template 속성에 정의된 dom 요소 접근하는 코드작성 불가능(인스턴스 부착전)

 

beforeMount

>render()함수 호출 직전 단계, 인스턴스 화면에 부착전 실행할 코드 구현

template 속성에 지정한 마크업 속성을 render()함수로 변환 후 el 속성에 지정한 화면요소에 인스턴스 부착전 호출

 

mounted

template 속성에 정의한 화면 요소에 접근 가능, 화면요소 제어하는 코드 구현

dom에 인스턴스 부착되자마다 호출, 하우 컴포넌트나 외부 라이브러리에 의해 추가된 요소들이 최종 html코드로 변환되는 시점과 다를 수 있어

 

beforeUpdate

$watch 데이터 관찰, 변경되면 가상 dom을 이용해 화면 다시 그려야해, 변경 예정인 데이터값으로 작업할 때, 데이버 변경로직 구현해도 화면에 다시 그려지지는 않아

(el 속성에서 지정한 화면요소에 인스턴스 부착되고 인스턴스 속성이 화면에 치환되는 데이터를 관찰)

 

update

beforeupdate끝나고 화면에 다시 그리고 실행, 데이터 변경 후 화면요소 제어하는 코드 구현

* 데이터 값 갱신하는 로직은 beforeUpate에서 하자(update에서 값 변경 시 beforeUpdate oo update 무한루프래)

 

beforeDestory

뷰 인스턴스가 destroy되기 직전 호출 단계, 인스턴스 접근 가능, 인스턴스 데이터 삭제, 사라지기 직전 작업 구현

 

destroyed

destruy된 후 호출되는 단계, 뷰 인스턴스에 정의한 모든 속성 제거, 하위에 선언한 인스턴스 모두 destroy

 

 

code에서 사용방법

vue 객체 내에서 속성으로 추가

<script>
  new Vue({
  	el: '#app',
    data: {
    	msg: 'hello'
    },
    
    beforeCreate(){},
    created(){},
    mouted(){},
    update(){}
  })
</script>