Vue :watch

watch

v-watch 는 데이터나 수식의 값이 변할 때 어떤 처리를 하고 싶을때 사용한다.

대부분의 경우 computed 속성이 더 적절하지만, 사용자 지정 감시자(watcher) 가 필요한 경우도 있다. 이것이 Vue 가 watch 옵션을 통해 데이터의 변경에 대응하는 방법을 제공하는 이유다. 이는 데이터 변경에 대한 응답으로 비동기 혹은 비용이 많이 드는 작업을 수행하려는 경우가 가장 유용하다.

입력문자 감지

<div id="app">
	<p>금지문자는 [{{ forbiddenText }}]</p>
	<textarea v-model="inputText"></textarea>
</div>

new Vue({
		el: "#app",
		data: {
			forbiddenText: '안되',
			inputText: '오늘 날씨가 좋습니다.'
		},
		watch: {
			// 입력한 문자열을 감시
			inputText : function() {
				var pos = this.inputText.indexOf(this.forbiddenText);
				if(pos >= 0) {
					alert(this.forbiddenText + " 는 입력할 수 없습니다");
					// 입력문자에서 금지문자 삭제
					this.inputText = this.inputText.substr(0, pos);
				}
			}	
		},
	})

타이머 만들기

<div id="app">
	<p>앞으로 {{ restSec }} 초 <br>
	<button v-on:click="startTimer">START</button>
</div>

new Vue({
		el: "#app",
		data: {
			restSec: 5,
			timerObj: null
		},
		methods: {
			startTimer:function() {
				// 남은시간 5초
				this.restSec = 5;
				// 타이머를 스타트, 1초씩 감소
				this.timerObj = setInterval(()=> {this.restSec--}, 1000)
			}
		},
		watch: {
			// 남은 초를 감시
			restSec: function() {
				//0초 이하가 되면 얼럿 띄우고 타이머 멈춤
				if(this.restSec <=0 ) {
					alert("제한시간 입니다!");
					clearInterval(this.timerObj);
				}
			}
		},
	})

TweenMax

watch 옵션은 에니메이션 감지 하는 것도 가능하다.

// TweenMax 라이브러리 CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>

<div id="app">
	<h2>TweenMax</h2>
	<button id="movebtn" type="button" onclick="myMove()">이동</button>
</div>

function myMove() {
	// movebtn x 프로퍼티를 1초에 500을 증가
	TweenMax.to("#movebtn", 1, {x: "500px"});
}

<div id="app">
	<p>값은 {{ animeNumber }} 입니다</p>
	<input v-model.number="myNumber" type="number">
</div>

new Vue({
		el: "#app",
		data: {
			myNumber: 0,
			tweenedNumber: 0
		},
		watch: {
			// myNumber를 감지하여 값이 변할 경우 실행
			myNumber: function() {
				// data의 tweenedNumber 프로퍼티를 1초에 myNumber까지 증가
				TweenMax.to(this.$data, 1, {tweenedNumber: this.myNumber})
			}
		},
		computed: {
			// tweenedNumber 값이 변경되는 변화중 애니메이션 산출
			animeNumber: function() {
				return parseFloat(this.tweenedNumber).toFixed(0);
			}
		}
	})