vue.js 인스턴스 라이프 사이클 정리 ( ++ created,beforeCreate...

vue.js 인스턴스 라이프 사이클 정리 ( ++ created,beforeCreate...

728x90

반응형

맨날 spring + jsp + html 으로만 개발하다가 이번 프로젝트에 springboot + vue.js로 개발을 해봤는데

이전에 잠깐 공부했던 angular.js가 떠오르더라구요

흠 맨날 하던것만 하니... 시대에 뒤쳐져가고 있습니다.

암튼 오늘은 vue.js 라이프 사이클 속성에 대해 정리해볼까 합니다.

인스턴스 흐름도

사이클 별 속성정보

먼저 흐름도를 이미지로 보실게요

1. 인스턴스 흐름도

해당 부분은 인스턴스가 생성되고 화면에 인스턴스가 부착된 뒤 소멸 되기 까지의 흐름도입니다.

라이프 사이클을 크게 나누면

1. 인스턴스의 생성

2. 인스턴스의 화면 부착

3. 부착된 인스턴스의 내용 갱신

4. 인스턴스의 소멸

4 단계를 거치고 있습니다. 이 단계 사이에 라이프 사이클 속성 created, mounted, updated등이 실행됩니다.

2. 사이클 별 속성정보

beforedCreated

인스턴스가 생성되고 가장 처음으로 실행되는 라이프 사이클 단계입니다.

이 단계에는 data속성과 method속성이 아직 인스턴스에 정의되어있지 않고 돔과 같은 화면 요소에도 접근할 수 없습니다.

created

beforeCreate 라이프 사이클 단계 다음에 실행되는 단계입니다.

data 속성과 method 속성이 정의되었기 때문에 this.data, this.fetchData()와 같은 로직들을 이용하여 data 속성과 method속성에 정의된 값을 접근하여 로직을 실행할 수 있습니다.

다만, 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 templete 속성에 정의된 돔 요소에 접근 할 수 없습니다.

beforeMount

created단계 이후 templete속성에 지정한 마크업 속성을 render()함수로 변환한 후 el 속성에 지정한 화면요소에 인스턴스를 부탁하기 전에 호출하는단계입니다.

render()함수가 호출되기직전의 로직을 추가하는게 좋습니다.

mounted

tempelete에 랜더링 되면서 데이터를 가져올 수 있어 실제 html처럼 정적으로 뿌려지는 첫화면이 이 화면인 것 같아요 .

el 속성에서 지정한 화면요소에 인스턴스가 부착되고 나면 호출되는 단계로 templete속성에 정의한 화면요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋습니다. 다만 돔에 인스턴스가 부착되자마자 바로 호출되기때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html코드로 변환하는 시점과 다를 수 있습니다.

beforeUpdate

el 속성에서 지정한 화면요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됩니다.

치환된 값은 뷰의 반응성을 제공하기 위해 $watch속성으로 관찰합니다.

또한 beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있습니다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다.

jquery기준으로 넘어오는 $("#id").val()같은 데이터 값을 정제하거나 변경하는 로직을 이쪽에서 수행하는 것 같네요

updated

데이터가 변경되고나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계입니다.

데이터 변경으로 인한 화면 요소변경까지 완료된 시점이므로 데이터 변경 후 화면 요소제어와 관련된 로직을 추가하기 좋은 단계입니다. 이 단계에서 데이터 값을 변경하면 무한루프에 빠질 수 있기때문에 값을 변경하려면 computed나 watch와 같은 속성을 사용해야합니다.

즉 데이터 값을 갱신하는 로직은 beforeUpdate에서, update에서는 변경 데이터의 화면요소와 관련된 로직을 추가하는게 좋습니다.

치환된 값은 뷰의 반응성을 제공하기 위해 $watch속성으로 관찰합니다.

위에서 beforeUpdate에서변경한 값을 실제 화면에 넣어주는 로직을 짜는 부분이 updated인데 실제로 로직구현은 watch와 computed 안에서 구현되더라구요

실제 로직 구현할 때 제일 많이 쓴 단계가 mounted, watch, computed 였던 것 같네요.

watch와 computed는 따로 블로그에 정의하도록 하겠습니다.

beforeDestroy

뷰 인스턴스가 파괴되기 직전에 호출되는 단계입니다.

아직 인스턴스에 접근 가능하며 데이터를 삭제하기 좋습니다.

destroyed

뷰 인스턴스가 파괴되고 호출되는 단계입니다. 인스턴스에 정의된 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됩니다.

아래와 같이 각각의 라이프 사이클에 맞춰서

mounted(){ 로직구현} 으로 사용하시면 됩니다.

export default {

name : 'Login' ,

components : {

qrcode

},

mounted () {

this . getUUID ()

this . callFunction ()

},

data () {

return {

message : '' ,

dismissSecs : 50 ,

dismissCountDown : 50 ,

mngNm : '' ,

telNo : ''

}

},

watch : {

dismissCountDown () {

if ( this . dismissCountDown !== 0 ) {

this . callFunction ()

}

}

},

methods : {

... mapActions ([ 'getLoginInfo' , 'setLoginKey' , 'getLoginKey' ]),

async getUUID () {

await this . getLoginInfo ()

this . message = this . $store . state . auth . loginResult

},

async refresh () {

await this . getLoginInfo ()

this . message = this . $store . state . auth . loginResult

this . dismissCountDown = 50

},

async callFunction () {

await this . getLoginKey ({ login_key : this . message })

},

async AppLogin () {

await this . setLoginKey ({

login_key : this . message ,

mng_nm : this . mngNm ,

tel_no : this . telNo

})

}

}

}

그럼 2만

728x90

반응형

from http://najungis.tistory.com/38 by ccl(A) rewrite - 2021-06-24 10:00:45