11. Vue - watch 속성

1. 기본 코드 및 설명

<template>
  <h1 @click="changeMessage">
    msg = {{ msg }}
  </h1>
  <h1>computedMessage = {{ computedMessage }}</h1>
</template>

<script>
export default { 
  data() {
    return {
      msg: "Hello?"
    }
  },
  computed: { 
    computedMessage() { 
      return this.msg.split('').reverse().join('')
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'Good!' 
    }
  }
}
</script>

<style>
 h1{
   font-size: 30px;
   padding: 5%;
 }
</style>

 

출력 화면(첫번째 h1 태그를 클릭하면 왼쪽에서 오른쪽으로 내용이 변경됨)

 

• computedMessage() 메소드: 이전 포스팅에서 사용한 것으로, 글자를 뒤집는 기능
• changeMessage() 메소드: 첫번째 h1 태그를 클릭하면 내용 변경

---

2. Watch란? 

• watch 속성은 데이터의 변경 사항을 감시하는 기능이다.
• 다음 예시코드를 보면서 어떻게 watch 속성이 동작하는지 알아보자. 

클릭하면 확대됩니다.

 

출력 화면(클릭해서 보는 것을 권장합니다)

 

• 이처럼 watch 속성에 등록된 data는 계속해서 감시된다.
• 감시를 받고있는 data의 값이 변경되면 watch에 작성된 로직을 수행하게 된다. 
• 일종의 이벤트 핸들러와 같은 방식으로 동작한다고 보면 된다. 

---

3. watch와 computed의 차이 

 

a) computed = 반응형 getter 

• 단순히 데이터를 읽는 것만 하는 것이 아니라 개발자에 의해 연산과정을 추가할 수 있다는 것이 특징이다. 
• 그러므로 computed 속성은 후처리가 가능한 getter다. 

 

b) watch = 반응형 callback 

• 흔히 callback이라고 하면 특정 조건에 의해 발동되는 처리과정 또는 연산을 의미한다. 
• watch 속성은 발동조건이 특정 값의 변동으로 설정되어 있는 것이다.