[Vue] compute, watch, filter 개념

computed

- 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속서
- computed 객체에 정의한 함수를 페이지가 최초 렌더링 될 때 호출하여 계산함

// 기본표현식
<div> {{ number1 + number2 }} </div>

// computed 사용시
<div> {{ result }} </div>

computed{
  result(){
    return number1 + number2
  }
}​

watch

- 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행

<div id="app">
  <button @click="number++">+</button>
</div>

<script>
 const app = new vue({
   data : {
     number : 0,
   },
   watch : {
   number : function(){
     console.log("숫자 증가")
     },
   }
 })
 </script>​

filters

- 화면에 표시되는 텍스트의 형식을 쉽게 변화해주는 기능

<div id="app">
  {{ message | change }}
</div>

<script>
 const app = new vue({
   data : {
     message : 'hello'
   },
   filters {
   change : function(vaule){
     return value.toUpperCase()
   }
 })
 </script>