Computed

반응형 데이터를 포함하는 복잡한 논리의 경우, 계산된 속성을 사용하는 것이 좋습니다.

캐싱기능이 있어, 한번 계산해놓았기 때문에 함수처점 반복적으로 호출하는것이 아닌 저장된값, 캐싱된값을 사용한다.

다만 읽기전용 이기때문에 getter, setter를 때로 설정해줘야 한다.

watch

변경된 데이터를 감지 할 수 있다.
일반 데이터 뿐만 아니라 Computed까지 감지 가 가능하다.
add()같은 메소드를 사용하면 문자열비 추가되는데 이렇게 바뀌는걸 감지한다.

<template>

	<section v-if = "hasFruit"> //computed사용
    	<ul>
      		<li v-for="fruit in fruits"  
      		:key="fruit">                
        	{{fruit}}
      		</li>
    	</ul>
    </section>
	<section>
    	<ul>
      		<li v-for="fruit in reversedFruits"  //computed사용
      		:key="fruit">                 
        	{{fruit}}
      		</li>
    	</ul>
    </section>
    
    
    <button @click="add">ADD</button>
    <h1>{{ reversedMessage }}</h1>
    
</template>

<script>
export default{
  data() { 
    return {
      fruits: [
       'Apple', 'Banana', 'Cherry'
      ],
      msg: 'hello compute!'
    }
  },
  
  computed: { //계산된 속성, 미리 계산해 두는 역할
  	hasFruit() {
    	return this.fruits.length > 0
    },
    reversedFruits() { 
     return this.fruits.map(fruit => {
     	return fruit.split('').reverse().join('')
     })
    }
    
    reversedMessage: { //일반 computed 데이터는 수정이 안댐
      get() {
        return this.msg.split('').reverse().join('')
      },
      set(value) {
        this.msg = value
      }
    }
  },
  watch: { //변경된 데이터 감지
  	msg(value){
    	console.log('msg: ', value)
    }
  }
  
  methods: {
    add() {
      this.reversedMessage += '?!'
    }
  }
}
</script>