[Vue] computed와 watch

쿼카쿼카·2022년 10월 30일
0

Vue / Nuxt

목록 보기
10/35

computed

연산 결과를 캐싱하여 re-render 될 때마다 불필요한 연산 줄임

templete 연산

<template>
  <div>
    {{message}}
    <h2>거꾸로 message</h2>
    <!-- template에서 연산 -->
    {{message.split('').reverse().join('')}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  }
}
</script>
  • 위처럼 작성하면 state나 props 변경으로 렌더링 일어날 때마다 연산이 발생

computed 연산

<template>
  <div>
    {{message}}
    <h2>거꾸로 message</h2>
    {{reverseMessage}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  // computed 연산
  computed: {
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>
  • message가 바뀌지 않으면 캐싱된 연산을 렌더링 때 사용

methods 연산

<template>
  <div>
    {{message}}
    <h2>거꾸로 message</h2>
    {{reverseMessage}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  // methods 연산
  methods: {
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>
  • methods에서 연산을 하면 결과는 같으나 함수는 렌더링 때마다 실행되어 캐싱 이득을 취할 수 없음

watch

state나 props를 감시하여 값 변경될 때의 행동 지정

watch로 fullname 만들기

<template>
  <div>
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">

    <h2>full name</h2>
    <span>{{fullname}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstname: '',
      lastname: '',
      fullname: ''
    }
  },
  watch: {
    // 매개변수는 watch가 감시하는 data의 변경된 값
    firstname(val) {
      this.fullname = `${val} ${this.lastname}`
    },
    lastname(val) {
      this.fullname = `${this.firstname} ${val}`
    }
  }
}
</script>
  • watch 프로퍼티로 변화 감시를 원하는 state나 props 값 넣어 함수 생성
  • 매개변수는 변경된 값을 가리킴
  • first last 변화 감지하여 fullname 생성
  • 사실 위 방법보단 computed가 더 좋음

computed로 fullname 만들기

<template>
  <div>
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">

    <h2>full name</h2>
    <span>{{fullname}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // state에 fullname 제거
      firstname: '',
      lastname: ''
    }
  },
  computed: {
    // computed로 fullname 한 번에 관리
    fullname() {
      return `${this.firstname} ${this.lastname}`
    }
  }
}
</script>
  • state에서 fullname 제거
  • computed에서 first last 한 번에 감지하여 fullname

computed & watch 어떻게 써야할까?

  • computed는 복잡한 연산을 캐싱할 때 사용 (사실 웬만한 연산이 있다면 사용해주는게 좋을 듯!)

  • watch는 비동기 통신처럼 언제 값이 변하는지 예측이 어려울 때 사용

    • 데이터를 받아오는데 몇 초가 걸릴지 예상이 안 되면 watch로 감시

참고 사이트

profile
쿼카에요

0개의 댓글