[vue] vue lifecycle 톺아보기

이글을 쓰게된 경위
1. vue를 할 줄 알게 되면서도 lifecycle에 대한 정확한 이해보단 사용하는 것만 사용하게 되는 문제가 있었음
2. 하단에 기수하는 스트립트가 바로 이글을 쓰게 만든 이유
3. 이 참에 한번 더 톺아보기

<script>
	data(){
    	return{
        	listData:{} //api에서 받아온 data 담김
        }
    },
	create(){
		this.fetchData(); // 처음 로드될 떄 created로 불러오는 data methode 실행
	},
    computed(){
    	retrun this.$router.params.id, // 해당 router가 바뀔때마다 conputed가 인식
    },
    methide(){
    	aysnc fatchData(){
        	try{
            	const {data: response} = awite api({
                params: this.$router.params.id, //api 필수 값
            }
            this.listData = response.data // api에서 받아온 값 설정
    	}catch(e){
        	console.log(e);
        }
    },
</script>

문제의 code
1. keep-alive로 캐쉬가 되어있는 목록 중 하나를 누름
2. 캐쉬가 남아있어 내가 누르는 데이터가 반영이 안되고, 새로고침을 해야만 넘어옴

해결한 lifeCycle!

<script>
	activated(){ 
    	this.listData();
    }
</script>

activated

• keep-alive 컴포넌트가 활성화 될 때 호줄 됩니다.
• 단 서버측 렌더링 중 호출 X
• keep-alive 로 캐시된 컴포넌트나, 페이지를 새로고침 할때마다 정확한 데이터를 불러올 수 있다.

( 자주 안쓰는 라이프 사이클을 더 정리해야지... )