[VUE] methods & computed

✔ 뷰의 methods와 computed는 사용법이 같지만 용도가 다르기 때문에 묶어서 정리 할려 함

메소드(함수)를 사용 할려면 methods : {} 로 선언 해준 뒤 안쪽에 함수명(){액션} 이렇게 넣어주고 함수내에서 데이터를 사용할 땐 this.변수명으로 사용해야 함.

뷰 methods (함수)

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
    
    increment: () => {
      // arrow function 금지
    }
  },
  mounted() {
    this.increment()
  }
}

사용법

<button @click="increment">{{ count }}</button>

뷰 computed (함수)

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    increment() {
      return this.count + 1
    }
  },
  mounted() {
    const variable = this.increment // variable 변수는 1이 된다.
  }
}

computed를 사용 할려면 computed : {} 로 선언 해준 뒤 안쪽에 함수명(){액션} 이렇게 넣어줌.
장점 : 액션의 값을 return 하여 값을 어디서든 쓸 수 있는 전역변수 처럼 쓸 수 있는 함수

v-for에서 filter나 concat map 같이 배열에서 검열 후 새로운 배열을 만들어 줄 땐 method가
아닌 computed에서 먼저 계산하고 메소드에 변수로 담자


computed의 getter와 setter

get 은 값을 확인/가져올 때, set 은 값을 설정/변경할 때 사용됩니다.

computed는 기본으로 getter함수로 되어 있지만 필요에 의해 setter로 설정 할 수있다.
getter에서 비동기 요청을 하거나 DOM을 변경하면 안되며 값을 확인/가져올 때만 사용해야 함.


나누는법

 computed: {
    변수로 쓸 함수 명 : {
      // getter
      get() {
        return 액션 
      },
      // setter
      set(newValue) {
        액션 // return 안써도 됨
      }
    }
  }

변수로 쓸 함수명으로 객체를 만들어 감싼 후 get과 set을 나누면 된다.

Computed와 methods의 차이점

  data() {
    return {
      message : "hello"
    }
  },

computed: {
    reversedMessage: function () {
    return this.message.split('').reverse().join('')
}
    
methods: {
  	reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

computed는 리액티브(Reactive, 반응적)인 의존관계에 의해 캐쉬화(캐쉬) 되어진다

message 변수가 변하지 않는 한 reversedMessage가 몇번이고 다시 랜더링 되도 함수를 실행 하지 않고 이전에 계산되어진 결과를 즉시 돌려준다 (React의 useCallback 개념)

반면 methods는 렌더링(rendering)을 다시 할 때마다 항상 함수를 실행한다.

✍ 캐싱이 필요한 이유

계산이 많이걸리는 A가 있다고 가정. 랜더링을 계속 한다고 했을 때, computed를 사용한다면 
reverseMessage 함수는 전에 계산되어 있던 결과를 그대로 반환하기 때문에 다시 계산 하지
않아도 되기 때문에 랜더링 속도 측면에서 더 우위에 있다.