Vue 인스턴스와 이벤트 처리

Vue 인스턴스

마운트 : 적재하다 - 트리구조에서 사용하는 용어(기존의 파일 시스템 트리에 다른 트리를 적재)

⇒ 인스턴스를 새로 만들어 기존의 트리구조에 마운트 → 렌더링

데이터 옵션

스크립트 파트에서 동작

데이터의 변경을 감지해 바로바로 화면에 렌더링(proxy로 래핑되어서)

• v-model은 양방향 바인딩

• v-model.number()은 숫자만 출력

computed : 여러 번 같은 계산을 할 때 캐싱되어 다음부터 부를 때 계산된 값을 출력

메서드 옵션

• 인스턴스 내에서 사용할 메서드 - 스크립트에서 직접 호출, 템플릿에서는 함수 호출문 사용{{}}

• 이벤트 핸들러로 이용 가능

• computed 옵션과 메서드 옵션 둘 다 가능

• 여러 개의 함수 정의 가능(객체)

• 함수 호출 형식으로 템플릿에 써주기 ex) sum()

하지만 세 번 호출되어 세 번 동작 - 비효율적 → 계산된 속성으로 하는 것이 효율적(캐시 때문에)

관찰 속성

watch 옵션 객체

watch: {
	함수() {
	}
}

• 객체 내에 함수로 정의

• 매개변수 두 개 - 첫 번째는 변경된 이후 값, 두 번째는 변경 전의 값

• 함수명은 관찰하고 싶은 데이터와 이름이 같아야 함

• 언제 사용? 사용자가 입력한 값에 따라 실시간으로 동작해야 할 때 - ex) 검색어 입력할 때마다 후보군이 계속 올라올 때? 등 필요

화면이 갱신되어야 할 때는 잘 안씀 - computed가 더 나음
변화가 생겼는데 화면에는 변화를 안주고 비즈니스 로직만 변화시킬 때 watch 사용

vue의 생명주기

언제 이 코드가 실행되어야 하느냐 - 생명주기에 맞춤

1. 먼저 컴포넌트 만들기 createApp() - 인스턴스 하나 만들어짐
2. 생성자가 호출되어 메모리 확보
3. 내부 초기화 - beforeCreate
4. 생성 - 뷰 자체의 초기화 하기 전과 후로 나뉘어짐
5. 그 이후 사용자 초기화 created
6. 마운트가 되면 화면에 등장 - 이때 이벤트 발생 등 사용자 업데이트
7. 업데이트 전후로도 이벤트 존재
8. 언마운트 하면 화면 상에서 사라지게 됨 - 클린업 작업을 위해
9. created와 mounted 시점을 가장 많이 사용

부모-자식 관계 컴포넌트

마운트 과정에서 자식을 생성해 마운트 시킴 - 마운트 된 후 부모가 작업 실행

(메모리에는 다 만들어짐, 화면에 나오는 건 부모 노드가 기존 노드에 마운트 될 때 - update 호출)

⭐computed, created(생명주기)

---

이벤트 처리

v-on 디렉티브

• 실제로는 단축 표현인 @[이벤트 이름]=”표현식”으로 많이 사용

@click="test($event)"
//메서드 파트?에 정의

• this는 가상 DOM에서 나오기 때문에 vue 인스턴스를 의미 → this 생략 가능

• $가 붙으면 뷰의 내부 속성을 의미

• 이벤트 객체와 나의 추가 정보 둘 다 넘길 수 있음

이벤트 전파

• 부모 - 자식 관계로 영역이 중첩될 때

->클릭 이벤트를 발생 시켰을 때 누가 처리 ? document, div#outer, div#inner 셋 모두의 영역임

⇒ 1. 부모 → 자식, 2. 자식 → 부모 둘 중에 선택

1. capturing
   1. 부모 -> 자식
2. bubbling - 일반적
   1. 자식 클릭 시 부모도 같이 대상이 됨
   2. 버블링 차단 - event.stopPropagation() 자식만 반응하기 원할 때 사용
   3. .stop이 있으면 자식에서 끝남(부모 호출 x)

• Once 수식어 - 한 번만 이벤트 발생시키고 해제
• 키보드 관련 이벤트 수식어 - 엔터키, esc키 누를 때
• 마우스 관련 이벤트 수식어 - left, right - ex) @click.left 등
• exact 수식어 : 정확히 일치하는 조합으로 이벤트 발생 필요 ex) 컨트롤키만 눌러야 함
  • @click.ctrl.exact
• 순수 자바스크립트에서는 구현하기 복잡하지만 뷰에서는 쉽게 구현 가능❗