07 Watch 속성
대부분의 경우에는 computed속성 사용을 권장하지만, 다른 데이터 기반으로 변경할 필요가 있는 데이터가 있는 경우, 즉 Vue 인스턴스의 데이터 변경을 감지해 다른 작업을 하는 등 데이터의 변경을 감지해 다른 어떤 일을 하게 할때는 watch 속성을 사용
- watch 속성은 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행 -> 명령형 프로그래밍
- computed 속성은 계산해야 하는 목표 데이터를 정의하는 방식 -> 선언형 프로그래밍
버튼을 클릭하면 changeMessage 메서드가 실행되며 message가 변경되고,
message를 감시하고 있던 watch가 실행되며 updated의 값을 변경시켜 준다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p>{{updated}}</p>
<button @click="changeMessage">Click</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message:'자바스크립트',
updated:'아니요'
},
methods: {
changeMessage(){
this.message = 'riverkim';
},
},
watch:{
message(newVal, oldVal){
console.log(newVal, oldVal)
this.updated = '네'
}
}
})
</script>
</body>
</html>감시할 데이터와 watch 안의 함수는 이름이 같아야 한다
예) message:'자바스크립트', message(){}
watch는 매개변수(파라미터)로 newValue와 oldValue를 받는다
결과화면
Hello!