computed properties (vue.js)

computed properties

 

vue 인스턴스 데이터를 가공할 때 computed property를 사용한다. 

computed: 대상으로 정한 data()속성값이 변했을 때, 이를 감지하고 자동으로 다시 연산해주고 결과 값은 캐싱(저장)한다.

값을 저장한다는 점을 기억하자.

 

 

 

[computed 유용한 기능]

 

1. 캐싱

의존하는 값에 변화가 없다면 다시 계산하지 않고 이전 값을 반환한다. 

의존되어 있는 computed함수를 아무리 호출하더라도 의존값이 변화가 없다면 이전에 계산되어 캐싱된 값을 반환하게 된다.

<template>
  <div>{{ firstName }}{{ lastName }}</div>
  <h2>computed fullname - {{ fullName }}</h2>
  <p>total - {{ total }}</p>
</template>

<script>
export default {
  props: ["inputText"],
  data() {
    return {
      firstName: "Bruce",
      lastName: "Wayne",
      items: [
        {
          id: 1,
          title: "TV",
          price: 100,
        },
        {
          id: 2,
          title: "Phone",
          price: 200,
        },
        {
          id: 3,
          title: "Camera",
          price: 300,
        },
      ],
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
    total() {
      return this.items.reduce((total, crr) => (total = total + crr.price), 0);
    },
  },
};
</script>

기존에 데이터를 머스테치를 활용해서 html에 출력했는데, computed를 사용하게 되면 캐싱기능을 사용하여 리소스 낭비를 줄일 수 있다.  주의할 점은 캐싱을 한 데이터를 값으로 사용할 경우는 ()를 뺸 값으로 사용한다.

 

 

<template>
  <p>total - {{ total }}</p>
  <button @click="items.push({ id: 4, title: 'keyboard', price: 50 })">
    추가하기
  </button>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          title: "TV",
          price: 100,
        },
        {
          id: 2,
          title: "Phone",
          price: 200,
        },
        {
          id: 3,
          title: "Camera",
          price: 300,
        },
      ],
    };
  },
  computed: {
    total() {
      return this.items.reduce((total, crr) => (total = total + crr.price), 0);
    },
  },
};
</script>

또한 종속성이 변경되면 자동으로 다시 계산되는 장점을 갖고있다.

 

---

 

 

2. Getter/ Setter

<template>
  <div>{{ firstName }}{{ lastName }}</div>
  <h2>computed fullname - {{ fullName }}</h2>
  <button @click="changeFullName">이름변경</button>
  </button>
</template>

<script>
export default {
  data() {
    return {
      firstName: "Bruce",
      lastName: "Wayne",
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
        // 속성을 읽기위해 값을 가져온다.
      },
      set(value) {
        // 계산된 속성에 새 값을 할당할 때 호출되는 함수이기에 인자값을 받는다.
        const names = value.split(" ");
        this.firstName = names[0];
        this.lastName = names[1];
      },
    },
  },
  methods: {
    changeFullName() {
      this.fullName = "이 망고";
    },
  },
};
</script>

 

 

<template lang="ko">
  <div>
    <div>

      <div>
        입력 값 : {{messageComputed}}
      </div>
      <input type="text" v-model="messageComputed" />

    </div>
  </div>
</template>

<script>
export default {
  name: "CommonButton",
  props: {
    name: String,
  },
  data() {
    return {
      message: "",
    };
  },
  computed: {
    messageComputed: {
      get() {
        return this.message;
      },
      set(value) {
        this.message = value.split("").reverse().join("");
      },
    },
  },
};
</script>

[getter]

값을 갖다 쓰는 상황에 get을 사용한다. 

computed에 만들어 놓은 하나의 계산된 데이터는 읽기 전용이다. 

할당 연산자를 통해서 값을 할당하더라도 반응적으로 동작할수 있는 형태가 아니다. 

내부의 기본적인 로직을 통해서 값을 얻어낼 수 있는 용도(getter)로 사용이 가능하다. 

 

 

[setter]

값을 넣는 상황일때 set을 이용한다. 

값을 읽을수도 있으며 여기에 더해 값을 지정할 수도 있다. 

 

 

 

---

 

computed는 언제 사용할까?

- 복잡한 로직을 처리할 때 사용한다. 

- 캐싱처리를 하기때문에 data 속성 값이 변하지 않았다면 캐싱 처리를 하고 있던 데이터를 반환한다. 

 

computed의 특징

- 종속데이터가 변경시 자동으로 연산처리함

- 데이터의 캐싱(저장) 처리가 된다.

- 호출시에 () 소괄호를 적지 않는다. 

- return값이 반드시 존재한다. 

 

computed 와 method의 차이점

- computed는 종속 대상을 따라  캐싱하고 methods는 종속된 값이란 개념이 없음

- computed는 종속 값이 변했을 경우만 다시 렌더링 한다. methods는 호출하면 렌더링 할 때마다 항상 함수를 실행시킨다. 

 

https://velog.io/@reasonz/2022.06.09-Vue-computed%EC%99%80-methods-%EC%B0%A8%EC%9D%B4%EC%A0%90

[2022.06.09] Vue computed와 methods 차이점

 

 

---

 

computed속성을 이용한 v-for

 

ui를 만들 때 조건부 렌더링을 해야하는 경우에  computed속성을 사용한다. 

주의할 점은 계산된 속성은 데이터를 캐싱하기 때문에 앱 성능이 저하되지 않도록 의존값에 대해 유의한다.

<template>

  <div v-for="item in items" :key="item.id">
    <h2 v-if="item.price > 150">{{ item.title }}</h2>
  </div>
  
  <div v-for="item in expensiveItem" :key="item.id">
    {{ item.title }}
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          title: "TV",
          price: 100,
        },
        {
          id: 2,
          title: "Phone",
          price: 200,
        },
        {
          id: 3,
          title: "Camera",
          price: 300,
        },
      ],
    };
  },
  computed: {
    expensiveItem() {
      return this.items.filter((item) => item.price > 200);
    },
  },
};
</script>