Vue.js Watch/Computed Caching - Computed VS Methods

🌲Computed

계산된 데이터를 활용하는 방식으로 computed 옵션에 선언한다.

---

예시 1

hasFruit() { 배열 데이터의 길이가 0보다 클때 }

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  computed: {
    hasFruit() {
      return this.fruits.length > 0
    }
  }
}
</script>

 

이렇게 만들어진 hasFruit함수는 template에서 아래와 같이 v-if디렉티브(불린)에 넣어 활용

-> 배열 데이터가 0보다 크면 표시하고 그렇지 않으면 보이지 않게 되는 결과

<template>
  <section v-if="hasFruit">
    <h1>Fruits</h1>
    <ul>
      <li 
      v-for="fruit in fruits"
      :key="fruit">
      {{ fruit }}
      </li>
    </ul>
  </section>
</template>

 

 

예시 2

reverseFruits() { 데이터 배열의 문자를 split하고 reverse하여 join하는 함수 }

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  computed: {
    reverseFruits() {
      return this.fruits.map(fruit => {
        return fruit.split('').reverse().join('')
      })
    }
  }
}
</script>

 

reverseFruits로 완성된 데이터배열을 반복하여 li에 나열

<template>
  <section>
    <ul>
      <li v-for="fruit in reverseFruits" :key="fruit"></li>
    </ul>
  </section>
</template>

 

 

🌲Caching

---

🌳Computed VS Methods

Computed에는 캐싱이라는 기능이 있어 한 번만 연산되기 때문에 데이터를 최적화할 수 있다.

반면 methods는 출력될 때마다 연산된다.

<template>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello!'
    }
  },
  computed: { 
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  methods: { 
    reverseMessage() {
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

 

 

🌲Getter & Setter

계산된 데이터 Computed는 읽기전용Readonly이기 때문에 메소드에 연산자를 할당하더라도 반응하지 않는다. Computed 내부에 있는 값을 얻어내는 용도로만 사용되는 의미로 이러한 방식을 Getter라고 한다.

---

🌳Getter + Setter

Getter에 Setter기능을 추가하는 방법

Computed옵션에서 get(){}과 set(){}으로 나누어 데이터를 받아들일 수 있는 구조로 변경한다.

<template>
  <button @click="add">ADD</button>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  // getter, setter
  data() {
    return {
      msg: 'hello!'
    }
  },
  computed: { 
    reversedMessage: {
      get() {
        return this.msg.split('').reverse().join('')
      },
      set(newValue) {
        this.msg = newValue
      }
    }
  },
  methods: {
    add() {
      this.reversedMessage += '!!'
    }
  }
}
</script>

 

 

🌲Watch

---

데이터의 변경사항을 감시하여 로직을 실행하는데 활용

 

<template>
  <h1 @click="changeMessage">{{ msg }}</h1> //Good!
  <h1>{{ reversedMessage }}</h1> // !olleh
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello!'
    }
  },
  computed: { 
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  watch: { //변경사항을 감시
    msg() {
      console.log(this.msg)
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'Good!'
    }
  }
}
</script>