2.인스턴스

https://kr.vuejs.org/v2/guide/

(공식 vue 가이드)

모든 vue앱은 vue함수로 새 vue인스턴스를 만드는 것부터 시작, 화면 단위를 생성

new Vue()

var vm = new Vue({
  // 옵션
})

Vue 생성자는 미리 정의 된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 될 수 있습니다.

option 객체 (데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프 사이클 콜백 등)

- vue.js 를 이용하여 ui 화면을 개발하기 위해 필요(생성자 접근 가능)

- Vue라는 기존 객체에 화면에서 사용할 옵션을 포함하여 화면의 단위를 생성

var vm = new Vue({

template: ,
el : ,
methods : {},
created: {}

})

옵션  : data, template, el, methods, life cycle callback 등

template 에 정적인 태그나, 뒷단의 모델 데이터를 앞단으로 연결해줄수 있는 값이 들어갈수있음

el은 화면이 그려지는 시작점(element) ex)#app

methods : 이벤트나 http요청들을 구현

created는 라이프사이클과 관련있음

전체 옵션 목록 -> https://kr.vuejs.org/v2/api/

속성과 메소드 

각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리 합니다.

 (프록시 : 컴퓨터 네트워크에서 다른 서버 상의 자원을 찾는 클라이언트로부터 요청을 받아 중계하는 서버를 말한다. 임시저장소)

데이터가 변경되면 화면은 다시 렌더링됩니다. 유념할 점은, data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이라는 것입니다. 즉, 다음과 같이 새 속성을 추가하면:

vm.b = 'hi'

b가 변경되어도 화면이 갱신되지 않습니다. (!)

- 어떤 속성이 나중에 필요하다는 것을 알고 있으며, 빈 값이거나 존재하지 않은 상태로 시작한다면 초기값을 지정할 필요가 있습니다.

- 예외 Object.freeze()

- 다른 사용자 정의 속성과 구분짓기 위해 $ 접두어를 붙임

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 는 인스턴스 메소드 입니다.
vm.$watch('a', function (newVal, oldVal) {
  // `vm.a`가 변경되면 호출 됩니다.
})

라이프 사이클

각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 관찰 설정이 필요한 경우, 템플릿을 컴파일하는 경우, 인스턴스를 DOM에 마운트하는 경우, 그리고 데이터가 변경되어 DOM를 업데이트하는 경우

라이프 사이클 단계에 따라 메서드 사용 가능(객체의 생성, 변경, 소멸에 대한 분기)

- mounted, updated, destroyed : 생성, 변경, 소멸

( created는 왜 안적혀있지....)

Vue는 Controller가 없다. 사용자 지정 로직은 라이프 사이클 훅으로 분할된다.

속성에 화살표 함수 사용 지양

options 속성이나 콜백에 created: () => console.log(this.a) 이나 vm.$watch('a', newValue => this.myMethod()) 와 같은 화살표 함수 사용을 지양하기 바랍니다.
화살표 함수들은 부모 컨텍스트에 바인딩되기 때문에, this 컨텍스트가 호출하는 Vue 인스턴스에서 사용할 경우 Uncaught TypeError: Cannot read property of undefined 또는 Uncaught TypeError: this.myMethod is not a function와 같은 오류가 발생하게 됩니다.