79일차

• vue강의 듣기

새로배운 내용

1. computed와 methods

computed는 data속성이 변경했을 떄 이를 감지하고 자동으로 다시 연산합니다. 즉, 반응형 getter와 같은 역할을 수행합니다.
보통은 템플릿을 보다 직관적으로 표현을 하기 위해 사용을 합니다.

computed와 methods 모두 vue.js 안에서 함수를 정의하는 부분이고, 데이터가 변동됨에 따라 정의된 함수를 재호출하게 된다는 공통점이 있습니다.

computed와 methods의 차이점은 데이터의 변경이 없을 때 드러나게 됩니다. 데이터의 변동이 없는 상태에서 computed는 이전의 계산된 값을 캐시해두었다가 함수 호출 시 다시 사용하게 됩니다.

반면, methods는 호출을 할 때마다 정의된 함수를 실행하며 다시 계산을 하게 됩니다.

따라서 데이터가 자주 변동되지 않는다면 computed를, 데이터가 자주 변경된다면 methods를 사용하는 것이 보다 효율적일 수 있습니다.(computed는 계속해서 캐시를 저장하기 떄문에)

그렇기 떄문에 template안에서 computed는 reversedMessage형태로 바로 사용을 하며 methods는 reversedMessage()식으로 호출을 하며 사용하게 됩니다.

2. Vue가 반응성을 갖게 되는 원리

const data = {
  message: 'Hello!',
  longMessage: 'Hello! World!'
}

const handler = {
  set(target, key, value) {
    if(key==='message') {
      target.longMessage = value + 'World!'
    }
    target.message = value
  }
}

const proxy = new Proxy(data, handler)
proxy.message='Hello!!!!'

찾아볼 내용

• api호출을 할 떄 watch와 computed