Vue 인스턴스

 

Vue 인스턴스와 다양한 옵션

 

 

 

📌 Vue (애플리케이션) 인스턴스

- Vue.createApp 메서드를 호출하여 만들어진 객체

- 전체 컴포넌트 트리는 애플리케이션 인스턴스를 마운트할 때 렌더링

- 루트 인스턴스(애플리케이션 인스턴스의 최상위 컴포넌트)는 DOM 트리에 마운트되어야 화면으로 렌더링

  => mount('id') 메서드 사용

const vm = Vue.createApp({
	name: 'App',
        data () {
            return {}
        }
}).mount('#app')

 

 

 

 

📌 옵션(options) 객체

- Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체

• data 옵션
  • 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용
  • 반드시 객체를 리턴하는 함수로 부여
  • data에 대한 Proxy 직접 접근 가능 => vm.$data.데이터명
• computed property (계산된 속성)
  • data나 다른 속성이 변경될 때 함수가 실행되어(계산된) 메모리에 저장된 캐싱된 값
  • 함수의 실행은 의존하고 있는 data나 속성이 변경될 때 한 번 호출
  • 마치 데이터인 것처럼 사용
  • 리턴값 필수
• methods (메서드)
  • Vue 인스턴스에서 사용할 메서드를 등록하는 옵션
  • 메서드 작성 시 화살표 함수를 메서드로 등록할 경우는 컴포넌트 인스턴스 this에 접근할 수 없음
    => 메서드가 컴포넌트 인스턴스에 접근해야 한다면 전통적인 js 함수로 작성
  • methods의 호출은 템플릿으로 렌더링될 때 호출
    computed의 호출은 데이터가 변경되면 미리 호출하여 캐싱해둔 값을 렌더링할 때 반복적 사용
• watch property (관찰 속성)
  • 긴 처리 시간이 필요한 비동기처리에 적합
  • 참조형의 객체 데이터 내부 속성값이 변경된 경우 감지 불가
    => 객체 간의 비교는 메모리 주소가 같은지 여부로 확인
    => 깊은 비교(deep compare) 필요
  • 관찰 속성의 남용은 data에 대한 의존 관계가 복잡해져서 코드의 실행 흐름을 분석하기가 어려워지고 디버깅이 까다로워지므로 메서드 + 이벤트 조합으로 사용 권장

var vm = Vue.createApp({
	watch: {
            examName (current, old) {
                ...
            },
            
            name (current) {
     			if (current.length >= 2) {
                	this.fetchContacts()
                }       
            }
    },
    methods: {
    	fetchContacts: _.debounce(function () {
        	axios.get(URL)
                    .then(res => {
                        this.contacts = res.data
                    })
        }, 300)
    }
}).mount('#app')


** examName : data 또는 속성명
** current : data의 변경후 값
** old : data의 변경전 값(생략 가능)

var vm = Vue.createApp({
	data: () => ({
            values: { x: 0, y: 0 }
        }),
	watch: {
            values (current) { // x나 y 값이 변경되어도 감지 불가 => 메모리 주소는 똑같기 떄문
            	...
            }
            /** 깊은 비교를 사용하여 감지
            values: {
            	handler (current) { ... },
                deep: true
            }
            **/
    }
}).mount('#app')

• 깊은 비교는 하위 트리를 탐색하여 일일이 값을 비교하는 작업이므로 CPU, 메모리를 많이 사용하는 고비용 작업이므로 아주 복잡한 객체에서는 사용 지양