computed

jude·2022년 2월 10일
0

vue

목록 보기
1/14
post-thumbnail

읽기 전용

computed는 기본적으로 읽기 전용이다.

<template>
  <button @click="changeMessage">Change</button>
  <div>{{ reversedMessage }}</div>
  <div>{{ reversedMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  computed: { // 읽기 전용
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  methods: {
    changeMessage() {
      this.reversedMessage = 'test'
    }
  }
}
</script>

버튼 클릭하면 아래와 같이 읽기 전용 이라고 경고가 뜨며 화면은 바뀌지 않는다.

[Vue warn]: Write operation failed: computed property "reversedMessage" is readonly.
  • computed에 선언된 로직은 읽기 전용이며 캐싱이 된다. (함수를 여러번 호출하여 메모리를 낭비하는 비효율을 막아줌)
  • 기본적으로는 읽기 전용이지만 gettersetter를 사용할 수 있다.

getter와 setter

  • getter와 setter를 사용할 때는 함수로 호출하는 방식이 아닌 객체 리터럴로 선언해서 그 안에 get(), set() 함수를 선언해서 사용한다.
  • set()의 매개변수(newVal)로 할당된 값이 들어온다.

버튼 클릭시 !dlrow olleH 에서 !!cba 로 수정이 된다.

<template>
  <button @click="changeMessage">Change</button> <!-- 1. 클릭 -->
  <div>{{ reversedMessage }}</div> <!-- 6. '!!cba' 출력 -->
  <div>{{ reversedMessage }}</div> <!-- 6. '!!cba' 출력 -->
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!' // 4. 'abc!!'로 값 변경
    }
  },
  computed: { // 읽기 전용
    reversedMessage: { // !!!!!주의 : get,set을 사용할 때는 함수 호출 방식이 아닌 객체 리터럴로 작성
      get() {
        return this.msg.split('').reverse().join('') // 5. this.msg가 변경되었기 때문에 다시 계산하여 '!!cba'
      },
      set(newVal) {
        this.msg = newVal // 3. 'abc!!' 값이 this.msg로 할당
      }
    }
  },
  methods: {
    changeMessage() {
      this.reversedMessage = 'abc!!' // 2. set() 으로 'abc!!' 할당
    }
  }
}
</script>
profile
UI 화면 만드는걸 좋아하는 UI개발자입니다. 프론트엔드 개발 공부 중입니다. 공부한 부분을 블로그로 간략히 정리하는 편입니다.

0개의 댓글