[Vue.js] Ch3 Vue 인스턴스

1. 옵션 객체

Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체를 data 옵션 객체라고 부른다.

var model = {
	name : "홍길동"
}

var vm = new Vue({
	// 옵션객체
	el : "#test",
    data : model
})

data 옵션에 주어진 모든 속성들은 Vue 인스턴스 내부에서 직접 이용되지 않고 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시를 두어 처리한다.

vm.name = "이몽룡"

model.name = "향단이"

위와 같이 객체의 속성처럼 접근할 수 있다. 이건 Vue 인스턴스가 프록시를 두어 Data옵션에 접근하기 때문이다.

 

vm.$data.name = "성춘향"

직접 접근하려면 위와 같이 작성해야 한다.

computed 도 마찬가지로 속성처럼 취급된다.

var vmSum = new Vue({
	el : "#example",
    data : {num:0},
    computed : {
    	sum : function() {
			var n = Number(this.num);
            if(Number.isNaN(n) || n < 1) return 0;
            return ((1+n) * n) /2;
        }
    }
    
}):

vmSum.sum

vmSum.$options.computed.sum 으로 접근할 수 있다.

 

이와 같은 계산형 속성은 읽기 전용뿐만 아니라 set메서드를 지정하면 쓰기 작업도 가능하다.

 

2. 메서드

메서드는 계산형 속성과 비슷하다. 하지만 차이점이 있다.

계산형 속성(computed)에 정의된 함수는 종속된 값에 의해 결과값이 캐싱되지만 메서드는 매번 함수를 실행한다.

따라서 메서드를 사용할 것인지, 계산형 속성을 사용할 것인지 결정할 때의 고려사항 중 하나가 캐싱 여부이다.

 

메서드 작성 시 화살표 함수를 사용해서는 안된다.

화살표함수란

함수를 선언하는 하나의 방식으로

var double = function(x) {return x*2}

const double = (x) => {return x*2} ------> 화살표 함수

왜냐하면 화살표 함수 내부에서는 this 가 Vue 인스턴스를 가리키지 않고 전역객체를 가리키기 때문이다.

 

3. 관찰속성

 

관찰속성(watch 옵션)에 등록되는 것은 속성의 이름과 해당 속성이 변경되었을 때 호출할 함수이다.

 

    <div id="watcher">
        x : <input type="text" v-model="x" /> <br/> y : <input type="text" v-model="y" /> <br/> 덧셈 결과 : {{sum}}
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#watcher',
            data: {
                x: 0,
                y: 0,
                sum: 0
            },
            watch: {
                x: function(v) {
                    console.log("XX x 변경");
                    var result = Number(v) + Number(this.y);
                    if (isNaN(result)) this.sum - 0;
                    else this.sum = result;
                },
                y: function(v) {
                    console.log("## y 변경");
                    this.y = v;
                    var result = Number(this.x) + Number(v);
                    if (isNaN(result)) this.sum = 0;
                    else this.sum = result;
                }
            }
        });
    </script>

 

관찰속성 실행결과

코드를 실행해보면 알겠지만, watcher 에 등록된 속성이 변경될때마다 해당 함수가 호출된다.

텍스트 박스 안의 글자가 변경될때마다 validation 해야하는 경우 유용할 것 같다

예를 들어, 텍스트 박스안에 영어만 들어가야한다든지, 한글만 들어가야한다든지 등등 말이다.

 

관찰속성은 긴 시간이 필요한 비동기 처리를 수행해야할 때 유용하다.

 

fetch()를 이용해서 비동기 통신을 학습해보겠다.

 

3.1 연락처 서비스 예제

 

vue, fetch, lodash 라이브러리를 참조한다.

lodash는 여러가지 유틸리티 기능을 제공하는데, _.debounce() 함수는 짧은 시간에 너무 많은 API 요청이 일어나는 것을 막는다.

 

    <script type="text/javascript">
        var vm = new Vue({
            el: '#example',
            data: {
                name: "",
                isProcessing: false,
                contactlist: []
            },
            // 관찰속성
            // name이 2자 이상이면 연락처를 가져온다.
            watch: {
                name: function(val) {
                    if (val.length >= 2) {
                        this.fetchContacts();
                    } else {
                        this.contactlist = [];
                    }
                }
            },
            // 메소드    
            methods: {
                fetchContacts: _.debounce(function() {
                        this.contactlist = [];
                        this.isProcessing = true; // 조회중
                        var url = "http://sample.bmaster.kro.kr/contacts_long/search/" +
                            this.name;
                        var vm = this; // 뷰 인스턴스 객체를 참조한다.
                        fetch(url)
                            .then(function(response) {
                                return response.json()
                            }).then(function(json) {

                                console.log(json);
                                vm.contactlist = json;
                                vm.isProcessing = false;
                            }).catch(function(ex) {
                                console.log('parsing failed', ex);
                                vm.contactlist = [];
                                vm.isProcessing = false;
                            })
                    }, 300) // 300ms 이내에 n번의 요청이 되지 않도록 작성
            }
        })
    </script>

 

실행결과

fetch()함수를 이용해 비동기적으로 연락처조회API를 호출하는 예제이다. watcher로 텍스트박스의 변경이 일어날 때 api를 호출하는데, 이는 computed로는 구현할 수 없다. computed는 값을 직접 return 해야하기 떄문이다. 그렇기 때문에 동기적 처리만 수행할 수 있다.

따라서 비동기 처리가 필요한 경우라면 관찰속성을 사용하거나 이벤트 처리 방법을 적용해야 한다.

-> watcher는 변동이 일어날때마다 함수를 수행한다는 점을 기억하자.

 

4. v-cloack 디렉티브

콧수염 표현식의 템플릿 문자열이 일시적으로 나타나는 현상을 없애준다.

[v-cloack] { display : none; }

5. Vue 인스턴스 라이프 사이클

라이프 사이클 훅	설명
beforeCreate	Vue 인스턴스 생성 후, watcher 및 이벤트 감시자 설정 전에 호출
created	Vue 인스턴스 생성 후, 옵션객체 속성 설정 완료된 후 호출
beforeMount	DOM 오브젝트에 마운트 전에 호출
mounted	DOM 오브젝트(el)에 마운트된 후 호출
beforeUpdate	데이터가 변경되고, 가상DOM에 렌더링 되기 전에 호출
updated	데이터 변경되어, DOM에 렌더링 된 후 호출
beforeDestroy	Vue 인스턴스 제거 전 호출
destroyed	Vue 인스턴스 제거 후 호출

https://vuejs.org/v2/guide/instance.html 참조

https://gist.github.com/fideloper/5708224