Vue 인스턴스

• Vue 인스턴스
  : var app = new Vue({...})와 같이 Vue 생성자로 만든 객체
• 옵션 객체
  : Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체

 

---

el, data, Computed 옵션

    <div id="test">
        {{name}}
    </div>
    <script type="text/javascript">
        var model = {
            name: "홍길동"
        }

        var vm = new Vue({
            el: '#test',
            data: model
        })
    </script>

 

 실행화면

data 옵션

Vue 인스턴스와 data 옵션에 주어진 객체 사이에 프록시를 두어 처리. 객체의 속성이 변경되면, 화면이 자동으로 갱신됨

vm.name과 같이 사용 가능하며, data 옵션에 직접 접근하고싶다면 vm.$data.name과 같이 접근

* 내장옵션들은 이름 충돌을 피하기 위해 모두 $식별자를 붙임

 

el 옵션

Vue 인스턴스에 연결할 HTML DOM 요소를 지정. 여러개의 요소에 지정할 수 없음!

 

computed 옵션

    <div id="example">
        <input type="text" v-model="num" /><br /> 1부터 입력된 수까지의 합 : <span>{{sum}}</span>
    </div>
    <script type="text/javascript">
        //1부터 입력된 수까지의 합구하기
        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;
                }
            }
        });
    </script>

실행화면 

sum은 함수이지만, vmSum.sum으로 속성 접근 방식을 사용했을 때 정상 실행됨→ 계산형 속성(Computed Property)

$options 속성을 이용해 실제 함수 확인할 수 있음

 

get/set 메소드를 지정해 계산형 속성의 쓰기작업도 가능하다.

    <script type="text/javascript">
        var vm = new Vue({
            el: "#example",
            data: {
                amt: 1234567
            },
            computed: {
                amount: {
                    get: function() {
                        var s = new String("" + this.amt);
                        var result = "";
                        var num = 0;
                        for (var i = s.length - 1; i >= 0; i--) {
                            result = s[i] + result;
                            if (num % 3 == 2 && i !== 0)
                                result = "," + result;
                            num++;
                        }
                        return result;
                    },
                    set: function(amt) {
                        if (typeof(amt) === "string") {
                            var result = parseInt(amt.replace(/,/g, ""))
                            if (isNaN(result)) this.amt = 0;
                            else this.amt = result;
                        } else if (typeof(amt) === "number")
                            this.amt = amt;
                    }
                }
            }
        });
    </script>

 

---

메서드

Vue 인스턴스에서 사용할 메서드를 등록하는 옵션

    <div id="example">
        <input type="text" v-model="num" /><br /> 1부터 입력된 수까지의 합 : <span>{{sum()}}</span>
    </div>
    <script type="text/javascript">
        //1부터 입력된 수까지의 합구하기
        var vmSum = new Vue({
            el: "#example",
            data: {
                num: 0
            },
            methods: {
                sum: function() {
                    console.log(Date.now());
                    var n = Number(this.num);
                    if (Number.isNaN(n) || n < 1) return 0;
                    return ((1 + n) * n) / 2;
                }
            }
        });
    </script>

메서드이기 때문에 {{ sum() }} 형태로 호출 구문 형식을 사용해야 한다.

 

• 메서드와 계산형 속성의 차이점
  계산형 속성은 종속된 값에 의해 결과값이 캐싱 ↔ 메서드는 매번 실행

메서드 작성 시 화살표함수(Arrow Function)을 사용하면 안됨!

this가 Vue 인스턴스를 가리키지 않고, 전역객체를 가리키게 된다. (this가 바뀌면 Vue 인스턴스 내부에 접근할 수 없다.)

 

---

관찰 속성

주로 긴 처리 시간이 필요한 비동기 처리에 적합

• 단점 : 값이 바뀔 때마다 매번 함수가 호출됨

    <div id="example">
        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: "#example",
            data: {
                x: 0,
                y: 0,
                sum: 0
            },
            watch: {
                x: function(v) { // x 속성이 변경되었을 때 호출되는 함수. v:변경된 x의 속성값
                    console.log('## 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>

watch 옵션

속성의 이름과 해당 속성이 변경되었을 때 호출할 함수를 등록. 함수가 전달받는 인자는 변경된 속성의 값.

 

---

Vue 인스턴스 라이프 사이클

Vue 컴포넌트 라이프 사이클 - https://vuejs.org/v2/guide/instance.html

 

라이프 사이클 훅	설명
beforeCreate	Vue 인스턴스가 생성되고 데이터에 대한 관찰 기능 및 이벤트 감시자 설정 전에 호출
created	Vue 인스턴스가 생성된 후에 데이터에 대한 관찰 기능, 계산형 속성, 메서드, 감시자 설정이 완료된 후에 호출
beforeMount	마운트가 시작되기 전에 호출
mounted	el에 vue 인스턴스의 데이터가 마운트된 후에 호출
beforeUpdate	가상 DOM이 렌더링, 패치되기 전에 데이터가 변경될 때 호출. 추가적인 상태 변경을 수행할 수 있으나, 추가로 렌더링 하지는 않음
updated	데이터의 변경으로 가상 DOM이 다시 렌더링되고 패치된 후에 호출. DOM에 종속성이 있는 연산을 이 단계에서 수행 가능 (컴포넌트의 DOM이 이미 업데이트된 상태라서)
beforeDestroy	Vue 인스턴스가 제거되기 전에 호출
destroyed	Vue 인스턴스가 제거된 후에 호출. Vue 인스턴스의 모든 디렉티브의 바인딩이 해제되고, 이벤트 연결이 모두 제거됨