22_03_10_Thu.md

[22.03.10.Thu] - Day 22

Vue.js

• LifeCycle hook
  • Vue 가 자동으로 호출해주는 hooks (함수)
  • created()
    • data, props, components, watch, computed, methods 등 이런 모든 정보를 가지고 준비가 끝난 상태
    • 사용자 눈애 바로 보이거나 이용하는 데이터는 이 시점에서 가져옴
  • mounted()
    • 실제 DOM이 렌더링이 끝난 상태
    • 사용자 시차 존재하는 부분의 데이터는 이 시점에서 가져옴
    • 데이터 엄청 많을 때는 프로그레스 바를 띄워서 mounted() 이후에 가져오도록 처리 가능
  • updated()
    • 데이터 변경이 일어남
  • unmounted()
    • 컴포넌트를 빠져 나갈때
• 재사용 컴포넌트
• provide
  • depth 상관없이 한번에 데이터 주입
  • 어떤 부모 컴포넌트로 받았는지 추적하기 힘듦 (크게 권장 X)
• custom directive

[Note]

• Vue Lifecycle hook 알아야 하는 이유
  • 퍼포먼스 향상 위함
  • 데이터 가져오는 시점 분배
• directive
  • v-for, v-on, v-if, ...
• computed
• keydown - keypress - input - keyup 순서
  • input 시점에 value 할당되지만 사용자 눈으로는 keyup하는 순간 보임
• mixin, plugin (다음주 TBC...)

Source Code