Vue 인스턴스
모든 Vue vm(ViewModel)은 Vue라는 생성자 함수로 만들게 된다.
var vm = new Vue({
// 옵션
})Vue 생성자는 미리 정의 된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 가능
컴포넌트란?
- Vue의 가장 강력한 기능중 하나
- 기본 HTML엘리먼트를 확장해 재사용이 가능한 코드를 캡슐화하는데 사용
나중에 컴포넌트에 대한 부분은 다시 나오니 그 때 자세히 알아보자
그러면 위에서 나온 인스턴스의 정의가 뭔가하고 찾아봤는데
자바(한번도 안해봄)에서 객체, 인스턴스 개념이 있다고 해서 읽어보니
Vue에서 사용되는 용어와 비슷하다 생각이 되어 적어봄
인스턴스(instance)란?
- 먼저 인스턴스를 설명하기 위해서는 객체가 무엇인지 먼저 알아야만 가능하다.
- 인스턴스는 객체를 생성하기 위해 만들어진 또 다른 객체를 바로 인스턴스(instance)라고 부른다
-인스턴스를 만들기 위해서는 객체지향에서 말하는 클래스(Class)가 필요하다.
- 클래스는 객체지향언어에서 가장 중요한 부분 중 하나라 다른 객체를 만드는 틀이라고 생각하면된다.
- 자바스크립트는 객체지향언어이지만 클래스가 아닌 프로토타입 방식의 객체지향언어이다.
-
인스턴스를 만드는 방법은 다르지만 인스턴스를 만든다는 것은 동일하다.
이렇게 만들어진 인스턴스는 어떤 특징을 가지고 있을까?
- 가장 기본적으로 원래의 객체가 가지고 있는 프로퍼티(property)와 메소드(method)를 상속받는다.
상속(inheritence)
- 객체지향에서 가장 중요한 부분이 상속이다. 상속을 통해 객체가 가지고 있는 프로퍼티와 메소드를 인스턴스에서도 동일하게 사용이 가능
- 인스턴스는 기존 객체에서 확장돼 다른 개별 속성들을 가질 수도 있을 것이다.
// 객체를 만들기 위한 생성자함수(Class)를 생성함
Shirt = function(color) {
this.color = color;
}
var Shirt1 = new Shirt('Yellow');
// 위 과정을 통해 Shirt1이란 인스턴스가 생성됨
var Shirt2 = new Shirt('white');
var Shirt3 = new Shirt('blue');
...
// 수 많은 인스턴스를 생성할 수 있음위의 예제로 개념을 이해하는데 큰 도움이 된 것 같다!
그럼 Vue에서 위의 개념을 적용시켜 컴포넌트 생성자와 인스턴스를 설명한 코드를 보면 다음과 같다.
var MyComponent = Vue.extend({
// 옵션 확장
})
// `MyComponent`의 모든 인스턴스는
// 미리 정의된 확장 옵션과 함께 생성됩니다.
var myComponentInstance = new MyComponent()속성과 메소드
각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리한다.
여기서 프록시란?
내가 이해한 바로는 속성을 받아와서 그대로 쓸수있게 해준다는 의미같다.
아래 코드로 이해해보자
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 속성 설정은 원본 데이터에도 영향을 미칩니다.
vm.a = 2
data.a // -> 2
// ... 당연하게도
data.a = 3
vm.a // -> 3이러한 프록시 속성은 반응형인데 나중에 다시 나온다고한다.
이때 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성, 메소드 를 제공하는데 이는 접두사 $ 를 붙여 사용한다고 한다
아래 코드로 이해해보자
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 는 인스턴스 메소드로 data에 따로 정의되지 않은 메소드
vm.$watch('a', function (newVal, oldVal) {
// `vm.a`가 변경되면 호출
})인스턴스 속성이나 콜백에서 화살표 함수(Arrow function) 사용하면 안됨
잘못된 예 - vm.$watch(‘a’, newVal => this.myMethod())
화살표 함수는 부모 컨텍스트에 바인딩 되어 있으므로 this는 Vue 인스턴스가 아니며
this. myMethod 는 정의되지 않는다.
인스턴스 라이프사이클 훅
- Vue 인스턴스가 하는일
- 데이터 관찰 설정
- 템플릿 컴파일
- 인스턴스를 DOM에 마운트
- 데이터가 변경될 때, DOM을 업데이트해야 할 때 초기화 단계를 거침
이때 라이프사이클 훅이 호출!
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 는 vm 인스턴스를 가리킵니다.
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"위의 코드로 이해해 보자
위에서 created 훅은 인스턴스 생성 후 호출
아래는 Vue.js의 라이프사이클이다
인스턴스에 대한 정의 끝!
사실 막 와닿진 않지만 뒤로 넘어가면서 쭉 보면 알듯 싶음
'개발 > Vue.js' 카테고리의 다른 글
| 5. 클래스와 스타일 바인딩(Class and Style Bindings) (0) | 2017.03.29 |
|---|---|
| 4. 계산된 속성과 감시자 (0) | 2017.03.28 |
| 3. Vue 템플릿 문법 (0) | 2017.03.27 |
| 1. Vue.js 시작하기 (0) | 2017.03.23 |
| 0. Vue.js 포스팅 (0) | 2017.03.23 |
