【Vue.js】 필터와 computed 캐시의 차이

소개

일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 제대로 기억하지 않으면 우선 그런 것을 비망록으로 1개 1개 남겨 둔다.

필터와 computed 캐시의 차이

필터(filters)란?

텍스트 등을, 어느 정해진 포맷으로 하고 싶을 때에 사용하는 Vue.js의 기능으로, 이하와 같이 정의해 사용할 수 있다.
(이하는 로컬 등록했을 경우의 정의 방법으로, 글로벌 등록하는 쓰는 방법도 있어, 그것은 여기 를 참조.)


Sample.vue

<template>
  <div>
    <!-- 省略 -->
    <h2>{{ title | upperCase }}</h2>
    <h4>{{ subTitle | lowerCase }}</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Welcome to Tokyo",
      subTitle: "Tokyo is a great city",
    };
  },
  filters: {
    upperCase(value) {
      return value.toUpperCase();
    },
    lowerCase(value) {
      return value.toLowerCase();
    },
  },
};
</script>

필터 캐시(다른 DOM이 변경될 때 어떻게 됩니까?)

필터를 어느 요소로 설정했을 경우, 그 요소가 변경되어 있지 않은 경우에서도, 다른 요소가 변경되면 다시 필터가 기능해 재묘화 되어 버리는 구조로 되어 있다. 그 때문에, 빈번하게 요소가 바뀌는 것 같은 웹 사이트에서 필터를 너무 많이 사용하면 처리가 느려져 사이트가 무겁게 될 가능성이 있다.
※ 【Vue.js】computed와 methods의 차이 와 같이 computed에서는 의존 관계처가 변경되었을 때만 재묘화를 하기 때문에 필터에 비해 효율적인 움직임이 된다.

동영상의 소스 코드는 이하.

Sample.vue

<template>
  <div>
    <!-- 省略 -->
    <h2>{{ title | upperCase }}</h2>
    <h4>{{ subTitle | lowerCase }}</h4>
    <p>{{ number }}</p>
    <button type="button" class="btn btn-primary" @click="number++">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Welcome to Tokyo",
      subTitle: "Tokyo is a great city",
      number: 0,
    };
  },
  filters: {
    upperCase(value) {
      console.log("filters", "upperCase");
      return value.toUpperCase();
    },
    lowerCase(value) {
      return value.toLowerCase();
    },
  },
};
</script>

필터와 computed의 구분

단순히 포맷하고 싶은 장면에서 그 대상이 적다면 computed를 사용하는 것이 속도의 면에서 봐도 좋다.
다만 computed에서는 정의해야 하는 수가 많아 힘들고, 필터로 해도 속도적으로는 문제가 없는 것 같은 경우라면 필터를 사용한다.



방향·부향


필터
재그리기가 자주 수행되는 장면에서는 부적합 computed에서는 수가 너무 많아 정의할 수 없는 장면에서는 방향

computed
재묘화가 자주 행해지는 장면에서 방향 묘화 속도를 가속화·처리를 가볍게 하는 방향

전체 소스 코드는

Vue.js 공부 메모 목록 기사 링크

Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.

htps : // 코 m / 유타 카타 야마 - 23 / ms / 다베 fb59d16 아 83f1 아 1d4