Computed vs Watch vs Methods

Computed vs Watch vs Methods 언제 어떻게 사용할까?

Computed vs Watch vs Methods 언제쓸까?

Computed는

vuejs - Computed
데이터다
간단한 연산일 때
data의 데이터들과 의존성
computed 속성은 의존(종속) 대상을 따라 **저장(캐싱)**된다
의존되어(종속) 있는 데이터가 변했을 경우에만 재 렌더링 한다.
데이터가 변경되지 않는 한, computed 속성 함수들은 계산을 다시 하지 않고 계산되어 있던 결과를 반환
return 되는 값으로 셋팅됨.
페이지가 처음 렌더링될 때 데이터를 업데이트 하려고 한다면 사용

// Vue.js 공식 홈페이지에 나와있는 예제
<template>
  <div>
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      message: '안녕하세요'
    }
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

computed 프로퍼티를 보면 reverseMessage 라는 프로퍼티에 값으로 익명함수가 할당되어있다.
computed에 정의하는 이 익명함수는 반드시 값을 리턴하도록 작성되야한다.

Watch는

vuejs - Watch
콜백함수
인자를 받거나 특정 액션이 필요한 경우
감시할 데이터가(특정 프로퍼티) 변경되면 함수가 실행됨
계속해서 데이터가 빈번하게 바뀔때

// Vue.js 공식 홈페이지에 나와있는 예제
<template>
  <div>
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      message: '안녕하세요',
      reversedMessage: ''
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      this.reversedMessage = newVal.split('').reverse().join('')
    }
  }
}
</script>

watch는 아무 프로퍼티도 생성하지 않고 익명함수는 단순히 콜백함수로의 역할을 한다.
watch에 명시된 프로퍼티는 감시할 대상을 의미할 뿐이다.

methods는

업데이트 라이프 사이클이 동작한(=아무 변수나) 변수 변경이 있을때 마다 무조건 항상 함수를 실행
인자를 받고 액션이 필요한 경우, 혹은 인자를 받고 그 값을 이용해서 다른값을 내야할때

// Vue.js 공식 홈페이지에 나와있는 예제
<template>
  <div>
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지: "{{ reversedMessage() }}"</p>
  </div>
</template>

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

캐싱이 필요한 이유

코드를 작성하다보면 자주 바뀌지는 않지만 중요한 계산이 필요할 때가 있다. 그때 methods를 사용하면 렌더링 될때마다 계산을 진행해야한다. 따라서 이 경우에는 computed 를 사용해 변경시에만 호출하도록 하는 것이 좋다.

computed와 methods와의 차이점

computed는 template에서 호출시 ()를 적지 않아야 된다.
computed는 return 값이 반드시 존재해야한다.
computed는 파라미터를 받을 수 없다.

참고

Previousvue assets images path dynamic binding - require()Nextv-if VS v-show

Last updated 3 years ago