Computed

지금까지 우리는 데이터들을 한개 또는 여러개를 활용하여 값을 나타낼때, methods를 사용하였다. 

이 방법도 좋지만, 이럴 경우 항상 다른 method로 인하여도 굳이 재render가 발생할 수 있다.

 

이를 보완하기 위해서 compute가 사용되고 있다. computed를 사용하면, Vue에서 알아서 해당 값이 또 rendering되야하는지를 판단해준다. 그 판단의 기준은 compute 내부에 있는 data가 변했는가에 따라서이다. 변화가 없으면 값을 caching한다.

React를 사용해봤다면, useEffect의 의존배열과 비슷하다고 생각 할 수 있다.

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      middleName: '',
      lastName: 'Doe',
      url: 'https://google.com',
      raw_url: '<a href="https://google.com" target="_blank">Google</a>',
      age: 20,
    };
  },
  methods: {
    increment() {
      return this.age++;
    },
    decrement() {
      return this.age--;
    },
    updateLastName(msg, event) {
      event.preventDefault();
      console.log(msg);
      this.lastName = event.target.value;
    },
    updateMiddleName(event) {
      this.middleName = event.target.value;
    },
    computed: {
      fullName() {
        return `${this.firstName} ${
          this.middleName
        } ${this.lastName.toUpperCase()}`;
      },
    },
  },
}).mount('#app');

<p>{{ fullName }}</p>

Vue Instance에서 볼 수 있듯이, computed도 methods와 비슷한 방식으로 선언한다. 차이점은, 반드시 return 값이 있어야한다.

그리고, Vue template에서 함수를 호출하는 방식이 아닌 하나의 data처럼 표현한다.

 

이를 활용하여, Vue의 성능을 향상 시킬 수 있다.