TIL51.computed&watch

jo_love·2020년 11월 28일
0
post-thumbnail

Vue에서 성능 최적화를 하기위해서는 computed와 watch에 대해서 잘 알아야 한다.

Computed 속성

data를 가공해서 보여줘야하는 경우 사용된다.
아래와 같은 템플릿을 사용하면 간단명료하지않기 때문에 computed를 사용하면 좋다. 계산된 값을 여러번 참조해야할 때 성능향상에 도움을 준다.

<div>
 {{ message.split('').reverse().join('') }}
</div>

Computed 사용법

computed 사용 전

<template>
  <div>
    <div @click="onClickScreen">{{message}}</div>
    	<div> 평균시간: {{return this.result.reduce((a, c) => a + c, 0)/this.result.length || 0 }}ms </div>
  </div>
</template>

computed 사용

<template>
  <div>
    <div @click="onClickScreen">{{message}}</div>
    	<div> 평균시간: {{average}}ms</div>
  </div>
</template>

<script> 
	let startTime = 0;
    let endTime = 0;
    let timeout = null;
export default {
  data() {
    return {
      result:[],
      state: 'waiting',
      message: "클릭하세요.",
    };
  },
  computed: {
    average() {
      return this.result.reduce((a, c) => a + c, 0)/this.result.length || 0;
  },
};
</script>

computed를 사용하지 않았을 경우를 생각해보자.
message가 바꿨을 때, template가 재실행되어 화면이 재렌더링된다. 그렇게되면 message만 데이터가 바꼈음에도 아랫부분의 평균시간을 구하는 div부분까지도 재실행되어진다.
나중에 계산이 복잡해졌을 경우 렌더링되는데 시간이 오래걸린다는 문제점이 발생한다.
후자 코드의 경우 'computed'속성 덕분에 캐싱된 average를 사용할 수 있어서 계산을 다시 하지 않아도 된다.

*캐싱이란? 웹캐시 저장소에 주어진 자원의 사본을 저장하고 있다가, 그 자원에 대한 request가 발생할 때에 갖고있던 사본을 돌려주는 것을 말한다.

computed와 method

method와 쓰임새가 비슷해보이는데 둘의 차이는 무엇인지 궁금증이 들었다.

computed 사용

<template>
  <div>
    {{ reversedMessage }}
    {{ reversedMessage }}
    {{ reversedMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "안녕하세요",
    };
  },
  methods: {},
  computed: {
    reversedMessage() {
      return this.message
        .split("")
        .reverse()
        .join("");
    },
  },
};
</script>

method 사용

<template>
  <div>
    {{ reversedMessage() }}
    {{ reversedMessage() }}
    {{ reversedMessage() }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "안녕하세요",
    };
  },
  methods: {
    reversedMessage() {
      return this.message
        .split("")
        .reverse()
        .join("");
    },
  },
 }; 

두 경우 모두 똑같은 결과를 나타내지만, 캐싱유무의 차이점이 존재한다.
method의 경우, 위에 예시에서 함수를 호출할 때 각각 3번의 계산을 거치게 된다. 반면에 , computed는 이미 계산된 값을 한번만 저장하여 사용하게 된다.

Watch 속성

대부분의 경우 computed를 사용하는 경우가 많지만 간혹 watch가 필요한 경우가 있다. watch는 computed와 비슷하지만 특정 데이터가 변경되었을 때 지정한 Callback 함수를 실행하는 속성을 가지고 있다.
정리하자면 데이터 변경 시 특정 동작을 취해야 하는 상황은 watch, 그 외 상황은 대체로 computed가 적합하다고 할 수 있다.

watch 사용법

export default {
  data() {
    return {
      message: "Hello",
      updated: "아니요",
    };
  },
watch: {
    message(newVal, oldVal) {
        console.log(newVal, oldVal)
        this.updated="네"
    },
  },
};

감시하고자하는 대상의 data를 watch에 함수형태로 넣어준다.
첫번째인자로 업데이트된 값, 두번째인자로는 이전의 값이 들어온다.
-> message(newVal, oldVal)

profile
Lv.1🌷

0개의 댓글