기록 블로그

Computed

<div id="hello">
<p> 역순 : "{{reverseHello}}"</p?

var vm = new Vue({
    el : '#hello'
    data: {
        hello: 'HEOLL'    
    },
    coumputed: {
        reverseHello() {
            return this.hello.split('').reverse().join('')  // LLOEH
        }
    }
})

hello 가 변경되지 않는 한 reverseHello를 여러번 요청해도 계산이 다시 되지 않고 계산 되어 있던 결과를 즉시 반환한다

cf) function

computed는 해당 속성이 변경될때만 함수가 실행된다.

언제 computed 사용?

• 캐싱을 원하는 경우 사용
• computed의 set, get속성

computed: {
    fullName: {
        get:function() {
            return this.firstName+''+this.secondName
        },
        set:function() {
            let name=newValue.splite('')
            this.firstName = names[0]
            this.lastName = name[names.length-1]
        }
    }
}

watch

• 옵션

  deep: true - Objects 내부의 중첩된 값 변경 감지

  immediate: true - 표현식의 현재 값으로 즉시 콜백 호출

  • 첫번째 콜백할때 호출함

  • 만약, 콜백대신에 unwatch 함수를 먼저 호출하고 싶으면

    watch: {
      value: {
          handle(newVal) {
              this.doSomething()
          }
          immediate: true
      }
    }