Vue - 데이터 호출 시점

vue 데이터 호출 시점

1) 컴포넌트 라이프 사이클 훅 

- created 

: 인스턴스가 생성되자마자 실행되는 로직들

- data observation, computed properties, methods, watch/event callbacks  에 접근가능.. 

 

2) 라우터 네비게이션 가드 

- 네비게이션 가드란? 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법 

- 특정 URL 로 접근하기 전의 동작을 정의하는 속성(함수) 

var router = new VueRouter();

router.beforeEach(function(to,from,next) {
	// to: 이동할 URL
    // from: 현재 URL
    // next: to에서 지정한 URL로 이동하기 위해 꼭 호출해야 하는 함수 

}

라우터 객체를 만들어 특정 URL 로 접근하기 전 function 에 들어간 콜백 메서드를 실행한다. 

콜백 메서드에서 로직을 실행하고, next 를 호출할 때만 해당 URL로 접근이 가능하다. 

 

export const router = new VueRouter({
	mode: 'history',
    routes: [
    	{
            path: '/basic',
            name: 'basic'
            component: BasicView,
            beforeEach:(to,from,next) => {
            console.log('to',to), // to는 이동할 URL 라우터 정보를 출력 
            console.log('from', to), // 현재 URL의 라우팅 정보 
            console.log(next) // function 
            //요기에 어떤 URL 로 들어가기 전 호출해야할 데이터를 호출하는 로직을 실행한다.. 
            //데이터를 불러오면 next 가 호출되도록 가능 
            }
        }
    
    
    
    ]









})

-> 라우터 가드의 장점은 데이터를 받아온 시점에 컴포넌트를 그리도록 하기 때문에 깔끔하게 페이지를 그릴 수 있지만.. 

데이터를 다 받아오기 전까지 사용자 입장에서는 페이지가 잘 동작하는 것인지 확인 x

-> 로딩 아이콘처럼 홈페이지가 동작하고 있음을 보여줄 수 있도록 하자 

 

Q 컴포넌트 라이프 사이클 훅과 라우터 네비게이션 가드의 호출시점은 누가 더 빠를까?

A. 라우터 네비게이션 가드가 컴포넌트 라이프 사이클 훅보다 먼저 호출된다.

따라서, 컴포넌트가 생성되고나서 데이터를 호출할것인지 컴포넌트 생성 전 라우팅 상태에서 데이터를 호출할 것인지 선택가능함