Vue.js - 핸드폰 번호 입력받기(라이프사이클)

• 결제창에서 핸드폰 번호를 입력받아야 했는데, 1) 정상적인 번호인지 2) 정상적인 번호가 될때까지 버튼 비활성화를 하고 싶었다.

• placeholder에서 하이픈 제외하고 입력 받으므로 일단 length만 파악하면 될것 같아서 length 파악하는 함수를 여기저기 입력해보았는데..

• computed에 넣었다가 watch에 넣었다가 updated에 넣었다가.. 어딜 넣어도 제대로 작동하지 않았다.

 <input class="apply-inputbox apply-phone-number" v-model.trim="mobileNo" type="number" placeholder="휴대폰번호 (‘-’ 제외">
<button class="btn btn-lg analytics" value="신청 완료" :disabled="parseInt(mobileNo.length) !== 11" @click="goPaymentCheck">신청 완료</button>

data() {
    return {
            mobileNo: '',
        }
    },
}

일케 간단하게 해결할 수 있었다…
v-model 제대로 언제써보나 했는데, 이참에 써보았군..

라이프사이클 관련해서 Easy Way to Understand the VueJS Component Lifecycle Hooks 이런 영상도 좀 보고..

이런 이미지도 좀 봤다.

하지만 써봐야 완전 내것이 되는 것…
created, mounted, updated는 알겠는데 computed 와 watch 는 좀 헷갈린다.

• computed는 이미 정의된 계산식에 따라 결과값을 반환할 때 사용되며, watch는 어떤 특정 조건에서 함수를 실행시키기 위한 트리거로서 사용할 수 있다. 출처

•   Vue.js 에서는 탬플릿 상에 렌더링되는 데이터의 경우 대부분 computed 속성이 적합하다고 추천하고 있습니다.
  
    1. 가급적이면 computed 속성을 사용한다
    2. computed 가 유용한 경우
    특히 데이터의 변화에 따라서 화면에 계산된 값을 화면에 출력해야 한는 경우
    캐싱 : 입력값이 같을 경우 캐싱했던 데이터를 바로 반환
  
    3. watch 를 사용해야하는 경우
    단순한 계산 외에 비동기 처리 로직이 포함되는 경우
    처리가 오래걸리는 수행하는 주기를 제한 가능(lodash의 debounce 이용)
    캐싱없이 매번 호출해야하는 경우
    탬플릿에 출력하지 않는 데 값의 변화를 관찰해야할 경우
  

  출처