vue watch

기존 컴포넌트가 남아있는 경우 created 라이프사이클로 작성한 코드가 실행되지 않는다.
이런경우 watch로 변경사항을 추적해서 변경해줄 수 있다.

//$route가 변경될 때 마다 추적할수잇도록 작성 
watch: {
    '$route'() {
    	this.cid = this.$route.params.cid
    }
},

watch: {  
   '$route'() {
      this.fetchData();
    }
}// 요거 대신에

watch: {
    '$route': {
        handler: 'fetchData',
        immediate: true
    }
} //이렇게 사용할수도 있다.
//주의 함수가 아닌 객체로 사용하는것

인풋 텍스트 watch 할때
텍스트(v) 이렇게 값을 인자로 받을수있다는게 신기하다.

<input type="text" v-model="inputText"/>

...
watch: {
    inputText(v) {
        this.valid = v.trim().length > 0
    }
}
...