watch // created

컴포넌트 인스턴스가 떠있는 상태에서 url에 따라서 뭔가 변화를 줘야한다면 watch /// 인스턴스가 뭐에 의해서라도 사라지면 created 에서 해줘도 무방

동일한 컴포넌트 인스턴스가 재사용된다는 것입니다. 두 라우트 모두 동일한 컴포넌트를 렌더링하므로 이전 인스턴스를 삭제 한 다음 새 인스턴스를 만드는 것보다 효율적입니다. 그러나 이는 또한 컴포넌트의 라이프 사이클 훅이 호출되지 않음을 의미합니다.

https://vuejs.org/v2/api/#vm-watch https://kr.vuejs.org/v2/api/index.html#watch http://hong.adfeel.info/frontend/%EA%B3%84%EC%82%B0%EB%90%9C-%EC%86%8D%EC%84%B1computed-%EA%B0%90%EC%8B%9C%EC%9E%90watch/

방법 1)  
watch: {
    ‘$route’() {   // $route 객체를 감시. 변경되면 실행되게 하는 함수
        this.fetchData() // fetchData함수 실행. $route변경 때마다 백엔드API호출 되도록 
    }
},
created() { // 컴포넌트 생성시
  this.fetchData()
}

방법 2) 
watch: { 
    '$route': {  // 함수가 아닌 객체로 설정하기
            handler: 'fetchData',   // 위와 동일 
            immediate: true // 즉시 실행하므로 created() { this.fetchData() }를 따로 하지 않아도 됨
        }
}

카드에서 created 써서 url로 변경하면 변경은 되는데 ( 보더까지 전부 변경 ) router-link 로 클릭해서 들어갈땐 안되네유 음 이건 아마 a 태그 기본 기능 막고 내부 로직 태워서?

{ path: 'c/:cid', component: Card } 여기서 컴포넌트 하나만 쓰죠

카드에서 created 쓰고 싶으면 { path: 'c/1', component: Card1 }, { path: 'c/2', component: Card2 }

watch : 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다. 비동기 연산 (API 엑세스)를 수행하고, 우리가 그 연산을 얼마나 자주 수행하는지 제한하고, 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있습니다. 계산된 속성은 이러한 기능을 수행할 수 없습니다.

내부가 변경될때마다 실행 api에서 불러온 데이터 변경시 자동변경되게 씀.

http://mygumi.tistory.com/201

created : 뷰 인스턴스 생성될때 한번 호출

computed

https://kr.vuejs.org/v2/guide/computed.html https://kr.vuejs.org/v2/api/index.html#computed

라우터, 동적 라우터 매칭

https://router.vuejs.org/kr/guide/essentials/navigation.html

https://router.vuejs.org/kr/guide/essentials/dynamic-matching.html