computed / watch

Computed

반응형 getter

선어형 프로그래밍

computed는 종속대상을 캐싱함 > 종속 대상이 변경될때 만 함수를 호출 아니면 다시 계산하지 않고 캐싱한 결과를 반환함

• 시간이 많이 걸리는 계산을 할때 computed를 사용하며 효율성이 높아짐 > but 종속 대상이 없으면 값이 변경되지 않는다.
• 호출 할 때마다 새롭게 계산하는경우 methods를 사용

    computed: {
        changeValue() {
            return `${this.value}hello;
        },
    },

watch

명형어 프로그래밍

데이터가 변경되었을 때 호출되는 콜백함수를 정의하는 watch 속성 제공

데이터를 감시하다가 데이터가 변경되면 함수가 실행되는 형식

watch: {
         currentPlayTime(newV, oldV) {
            //동작 수행 
        }
},

data() {
      return {
        currentPlayTime: -1,
},

• currentPlayTime값이 변할 때 마다 watch 의 currentPlayTime 함수가 실행됨 , newV는 바뀐값 , oldV는 이전값