VueJS day4

computed | watch

computed

computed은 복잡한 로직을 단순화하여 표현가는 것이 가능하게해준다.

<div id="app">
    <br>
    <br>
    <br>
    
    <button @click="changeMessage">Click</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
    	message: "안녕하세요"
    },
    methods: {
    	changeMessage(){
    		this.message = "반갑습니다"
    	}
    },
    computed: {
    	reverseMessage(){
    		return this.message.split('').reverse().join('');
    	}
    }
})

changeMessage 메소드 실행전

changeMessage 메소드 실행후

computed내에 메소드를 만들경우 메소드 결과를 미리 페이지 로딩시 저장해 놓고 여러번 메소드 요청이 있을 경우 미리 저장된 결과만 즉시 반환하게된다. 반면, method내에 메소드를 만들경우 웹문서를 읽는 도중 메소드 요청이 있을 경우 매번 메소드를 실행하게 된다. 만약 message가 변경된다면 message가 변경되었다는 것을 미리 알고 결과를 재저장하게되어 보여준다.

watch

감시자의 역할로 어떠한 변화가 있을 경우 watch가 변화를 체크하게된다.

<div id="app">
    
    <button @click="changeMessage">Click</button><br>
    
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: "안녕하세요",
    },
    methods: {
        changeMessage(){
        	this.message = "반갑습니다"
        }
    },
    watch: {
        message(newVal, oldVal){
        	console.log(newVal, oldVal); // newVal: 반갑습니다, oldVal: 안녕하세요
        }
    }
})

changeMessage 메소드 실행전

changeMessage 메소드 실행후

콘솔 출력 : 반갑습니다 안녕하세요