600.jpg

Vue 인스턴스란?

  • Vue 인스턴스란 생성된 Vue 오브젝트 하나
  • Vue 앱을 시작하기 위해 필수적이며, 앱의 진입점이 됨
  • 간단한 템플릿 렌드링부터 데이터 바인딩, 컴포넌트 등 많은 동작 수행

인스턴스 생성

  • 인스턴스를 생성할 때 데이터, 템플릿 메서드 등 옵션값을 전달할 수 있음
 var vm = new Vue({
         //옵션
 })
  • Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용
  • Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며
    선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성
new Vue({
    el: '#app',

    template: '',

    data: {},

    props: [], // {}

    methods: {},

    computed: {},

    watch: {}
});

el ( string | HTMLElement )
대상이 되는 html element 또는 css selector ( vm.$el )
template ( string )
Vue 인스턴스의 마크업으로 사용할 문자열 템플릿
data ( Object | Function )
화면을 그리는데 사용하는 data 를 반환하는 함수 또는 data 객체 ( vm.$data )
props ( Array<string> | Object )
부모 컴포넌트로부터 전달 받은 property들의 Array 혹은 Object
methods ( [key: string]: Function )
Vue 인스턴스에서 사용되는 메소드. this 컨텍스트를 Vue 인스턴스에 바인딩 합니다.
computed ( [key: string]: Function | { get: Function, set: Function } )
계산된 속성. getter와 setter는 자동으로 this 컨텍스트를 Vue 인스턴스에 바인딩 합니다.
watch ( [key: string]: string | Function | Object | Array )
감시된 속성. Vue 인스턴스에 데이터가 변경되는 시점에 호출

※ 참고
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와 같은 오류가 발생하게 됩니다.

데이터와 메서드

  • Vue 인스턴스의 데이터는 View에 무언가를 사용자에게 보여 주기 위해 정의
    new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!', //string
            price: 10000,  //number
            list: ['One','Two'], //list
            object: {  //object
                a:1,
                b:2,
            }            
        }
    })
  • 어떤 타입의 데이터 형태도 정의 가능
  • Vue 인스턴스 내부 로직 연산 가능
  • 데이터가 변경되면 화면은 다시 렌더링

라이프사이클

  • 라이프사이클이란 Vue 인스턴스의 생성부터 파괴까지의 일련의 과정
  • 생성 > 마운트 > 업데이트 > 파괴
  • 사용자는 Vue 인스턴스를 생성할 때 전달해던 Option을 통해 라이프사이클 훅을 정의할 수 있음

라이프사이클 다이어그램

lifecycle.png

  • beforeCreate: Vue 인스턴스가 생성되기 전
  • created: vue 인스턴스가 생성된 후
  • beforeMount: Vue 인스턴스가 마운트되기 전
  • Mounted : Vue 인스턴스가 마운트된 후
  • beforeDestory: Vue 인스턴스가 파괴된기 전
  • Destory: Vue 인스턴스가 파괴된 후
  • beforeUpdate: Vue 인스턴스의 데이터가 변경되어 다시 렌더링하기 전
  • upDated: Vue 인스턴스의 데이터가 변경되어 다시 렌더링한 후

계산된 속성

  • 표현식은 잘 못 사용할 경우 가독성이 떨어져 유지보수가 어려워 질 수 있음
  • Vue 인스턴스의 계산된 속성을 사용하면 종속성이 있는 데이터에 따라 캐시가 됨
  • 종속성이 있는 데이터의 경우 methods보다 computed 를 사용

감시된 속성

  • Vue 인스턴스의 데이터가 변경되는 시점을 감시해 메서드를 호출하는 기능
  • watch
      new Vue({
          el: '#app',
          data: {
              search: ''
          },
          watch: {
              this.$(http.get('/search?value' + value)
                  .then(function (response) {
                      /* ... */
                  });
              }
          }
          }
      });