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 인스턴스가 하는일
    1. 데이터 관찰 설정
    2. 템플릿 컴파일
    3. 인스턴스를 DOM에 마운트
    4. 데이터가 변경될 때, 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
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

먼저 Vue.js에 대해 전반적으로 살펴보자

우선 Vue.js를 사용하기 위해서는 아래 코드를 html문서에 삽입해주면 끝!

<script src="https://unpkg.com/vue"></script>

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는것!

//HTML
<div id="app">
  {{ message }}
</div>
//JavaScript
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

코드를 하나씩 살펴보면서 이해를 도와보자
{{ }} 는 데이터의 내용이 렌더링 되어 HTML 문서에 표현되기 위해 작성해주며
el은 element의 약자로 HTML 엘리먼트를 선택해주고
data 안에는 HTML문서의 {{ }}안에 작성된 변수(message)를 정의해 이를 HTML에 렌더링 시켜주며
이는 콘솔창에서 app.message = “”로 변경이 가능

이것이 가장 기초적인 Vue.js의 문법이며 앞으로 엄청 많은것들을 익힐 예정임!


자료 참고는 Vue.js 2.0 공식사이트 [https://kr.vuejs.org] 이며
공식 사이트 문서를 토대로 정리를 할 것이고,
혹시 이 글을 보시면서 정보가 부족하다 느끼시는 분들은 공식 사이트에서 해답을 얻으시면 좋을 것 같습니다.

'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

오늘부터 꾸준히 Vue.js에 대해서 포스팅하면서 공부해 보려고 한다

Angular2, React, Vue 세가지 중 가장 끌렸던게 Vue.js였기 때문에

그냥 읽는 것만으로는 이해에 한계가 있어 직접 남기면서 익혀보려 함.


공식 홈페이지 문서는 다음과 같다  https://kr.vuejs.org/ 

영어를 잘하시는분들이 번역을 전부 해놔서 영어를 못하는 나도 한글로 읽을수 있다!


깃헙의 통계자료인데 보시다시피 'Vue.js 2.0'을 선보이고 나서 사람들의 관심이 대폭 상승했음을 보여주는 자료인 것 같다



사실 그냥 재밌어보여서 시작하는 것..

말을 잘 못해서 길게 쓸 말이 떠오르진 않고 Vue.js 중간에 안놓고 끝까지 할 수 있도록 해야겠다 !

보기쉽게 쓰기보다 공부한 내용을 혼자 정리하는 느낌이라 혹시라도 보시는 분들은 불편하실수도 있을 것 같지만

최대한 깔끔하게 정리해보려 함!

'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

+ Recent posts