Study Note

methods

정의

methods {
   add(num) {
      this.num += num;
   }
}

사용

<button v-on:click="add(10)"> add 10 </button>

• 템플릿에서 데이터를 바인딩할 때 사용한다.
• data binding, event binding
• 컴포넌트의 렌더링 주기에 맞춰 매번 수행된다.
• 따라서, event binding에서는 methods를 주로 사용한다.

computed

정의

computed: {
   number() {
      return this.num + 10;
   }
}

사용

<div>Added Number : {{ number }}</div>

• data binding에만 사용된다.
• event binding에는 사용되지 않는다.
• 다른 데이터를 기반으로 하는 데이터를 가져오기 유용하다.
• 의존하는 데이터가 변경될 때만 재실행되거나 재평가된다.
  (다른 데이터가 변경될 때는 재평가 되지 않는다)
• 따러서, 다른 데이터에 의존하는 데이터에 주로 사용한다.
• 연산을 하는 함수이지만, 결과를 데이터처럼 사용할 것이기 때문에,
  이름을 addNumber() 라고 짓지 않고, data를 다루듯이 number() 라고 하였다.

watch

정의

watch: {
   number(newValue, oldValue)	{
      this.number = newValue + 10;
   }
},
data() {
  return {
     number: 0
  }
}

사용

<div>Added Number : {{ number }}</div>

• 템플릿에 직접 사용하지 않는다.
• 템플릿 내부에서 참조하지 않지만, data, computed property를 포함한 어느 property든 감시할 수 있다.
• 데이터 변경에 대한 반응(reaction)을 코드로 실행할 수 있다.
• ex) http request, timer 설정, local storage에 데이터 저장
• 주로, 데이터가 아닌 업데이트에 watch를 사용
  (바뀌는 데이터를 토대로, 데이터가 아닌 내부에서 업데이트하는 작업이 있는 경우 사용)
• 바뀌기 전의 값과 갱신후의 값을 파라미터로 받을 수 있다.

[참조]

• Udemy
  Vue - 완벽 가이드 (Router 및 Composition API 포함)
  https://www.udemy.com/share/107reM/