뷰 인스턴스
- 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
뷰 인스턴스 생성자
- new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 칭함. 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서 사용.
뷰 인스턴스의 라이프 사이클 관련 속성들
beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계, data속성과 methods 속성이 아직 정의 되기전이고, 돔과 같은 화면 요소에도 접근 불가
created : data 속성과 methods 속성이 정의 되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용, template 속성에 정의한 돔 요소로 접근 불가. data와 methods 속성에 접근할 수 있는 가장 첫 번째 라이프 사이클 단계이므로 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.
beforeMount : template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출되는 단계
mounted : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계입니다.
beforeUpdate : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환. 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시한다.
updated : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가 하기 좋은 단계. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질수 있기 때문에 값을 변경하려면 computed, watch 같은 속성을 사용 해아한다.
beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계. 뷰 인스턴스의 데이터를 삭제하기 좋은 단계
컴포넌트
- 화면을 구성할 수 있는 블록을 의미. 이 것을 활용해 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있다.
컴포넌트 등록
- 전역과 지역 두가지 방법이 있고 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록합니다.
Vue.component('컴포넌프 이름', {
//contents - ex) template: '<div>something</div>'
})상위 컴포넌트에서 하위 컴포넌트로 데이터 전달
-props 속성 : 상위 컴포넌트의 데이터를 하위 컴포넌트로 넘겨줄 때 사용
<div id="app">
<child-component v-bind:propsdata="msg"></child-component>
</div>
<script>
Vue.component('child-component', {
props:['propsdata'],
template:'<p>{{propsdata}}</p>',
});
new Vue({
el: "#app",
data: {
msg : 'Hello! vue!'
}
});
</script>
하위에서 상위 컴포넌트로 이벤트 전달하기
- 하위 컴포넌트에서 상위 컴포넌트로의 통신은 이벤트를 발생시켜(event emit) 상위 컴포넌트에 신호를 보낸다. 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출
//이벤트 발생
this.$emit('이벤트명');
//수신
<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>같은 레벨의 컴포넌트 간 통신
- 공통 상위 컴포넌트에 이벤트를 전달한 후 공통 상위 컴포넌트에서 2개의 하위 컴포넌트에 props을 내려 보내는 방식
관계 없는 컴포넌트 간 통신
- Event Bus 를 이용. 형식은 다음과 같다.
//이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();
//이벤트를 보내는 컴포넌트
methods: {
메서드명: function(){
eventBus.$emit('이벤트명',데이터);
}
}
//이벤트를 받는 컴포넌트
methods: {
created: function() {
eventBus.$on('이벤트명', function(데이터) {
//...
});
}
}
