Vue.js watch속성

 

대부분의 경우 computed속성이 더 적합하지만 사용자가 만든 감시자가 
필요한 경우가 있습니다.
그래서 Vue는 watch 옵션을 통해 데이터 변경에 반응하는 보다 일반적인
방법을 제공합니다. 이는 데이터 변경에 대한 응답으로 비동기식
또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다.

HTML부분
<div id="watch-example">
    <p>
        yes/no 질문을 물어보세요:
        <input v-model="question">
    </p>
    <p>{{answer}}</p>
</div>

JS부분
<!-- 이미 Ajax라이브러리의 풍부한 생태계와 범용 유틸리티 메소드 컬렉션이
있기 때문에 , Vue코어는 다시 만들지 않아 작게 유지됩니다. 
이것은 이미 익숙한 것을 선택할 수 있는 자유를 줍니다.-->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
    el: '#watch-example',
    data: {
        question: '',
        answer: '질문을 하기 전까지는 대답할 수 없습니다.'
    }, 
    watch: {
        //질문이 변경될 때 마다 이 기능이 실행됩니다.
        question: function(newQuestion){
            this.answer = '입력을 기다리는 중...'
            this.getAnswer()
        }
    },
    methods:{
    //_.debounce는 lodash가 제공하는 기능으로 
    //특히 시간이 많이 소요되는 작업을 실행할 수 있는 빈도를 제한합니다.
    //이 경우, 우리는 yesno.wtf/api에 액세스 하는 빈도를 제한하고,
    //사용자가 ajax요청을 하기 전에 타이핑을 완전히 마칠때까지 기다리길 바랍니다.
    //_.debounce함수(또는 이와 유사한 _.throttle)에 대한
    //자세한 내용을 보려면 https://lodash.com/docs#debounce를 방문하세요.
    getAnswer: _.debounce(
        function(){
            if(this.question.indexOf('?') === -1){
                this.answer = '질문에는 일반적으로 물음표가 포함 됩니다.'
                return 
            }
            
            this.answer = '생각중...'
            var vm = this
            axios.get('https://yesno.wtf/api')
            .then(function(response){
                vm.answer = _.capitalize(response.data.answer)
            })
            .catch(function(error){
                vm.answer = '에러! API요청에 오류가 있습니다. '+ error
            })
        }, 
        //사용자가 입력을 기다리는 시간(밀리세컨드)입니다.
        500
    )
    }
})
</script>