vue- computed

data 속성을 받아서 단순하게 값을 계산해서 output을 내는 개념으로, vue 템플릿 코드의 가독성을 높여준다.

computed 속성은 인자를 받지 않는다.
아래 예시, computed 속성에 인자를 받는 순간 에러를 내뱉는다.

<div>{{ reverseMessage(false) }}</div>

// X 틀린 선언 X
computed: {
  reverseMessage(isReversed) {
    return isReversed ? this.message.split('').reverse().join('') : this.message;
  }
}

computed 속성의 대상으로 정한 data 속성이 변했을 때, 이를 감지하고 실시간으로 자동연산 해주며, 연산결과를 캐싱해주는 속성이다. 그래서 반복적인 데이터를 사용해야 할 때, 브라우저 리소스 낭비를 줄일 수 있다. (빠른 응답을 줄 수 있음)

HTTP 요청과 같은 코드를 절대 넣지 않는다. computed 속성은 템플릿 코드의 가독성을 높히기 위한 속성이며, HTTP 통신과 같이 브라우저 리소스가 많이 할애되는 코드들은 watch나 methods에 넣어준다.

data: {
  message: ''
},
  
// X 틀린 선언 X  
computed: {
  reverseMessage() {
    var vm = this;
    axios.get('/message').then(function(response) {
      vm.message = response.data;
    });
    return this.message.split('').reverse().join('');
  }
}

기본 예제

<template>
  <div>
    <p>{{ ticketList }}</p>
    <p>{{ increse }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      score: 1
    };
  },
  computed: {
    increse() {
      return score + 1;
      //data에 직접 접근하여 계산한 결과를 템플릿에 보일 수 있습니다.
    },
    ticketList() {
      return this.$store.getters["ticket/ticket"];
      // ticket.js라는 store에 접근해 ticket state를 가져온 후 템플릿에 보입니다.
    }
  }
};
</script>

getter / setter

changeNameSetter이 임의의 값을 바꾸게 되면, set이 실행되고, firstName과 lastName이 동시에 바뀌게 된다.

<button v-on:click="changeNameSetter("Mark Gonzales")">Change Name (setter)</button>

computed: {
  fullName: {
    get () {
      alert("Assembling Full Name ... ");
      return this.firstName + ' ' + this.lastName;
    },
    set (newValue) {
      alert("Setting new name: " + newValue);
      const parts = newValue.split(' ');
      this.firstName = parts[0];
      this.lastName = parts[parts.length - 1];
    }
  }
},
methods: {
  // ...
  changeNameSetter: function(newName) {
    this.fullName = newName; 
  }
},
data: {
  firstName: 'Bo',
  lastName: 'Andersen'
}

Reference

참고
참고
참고