02.Vue 인스턴스 - Githubissues

Vue 인스턴스란?

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

인스턴스 생성

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

new Vue({
    el: '#app', // 대상이 되는 html element 또는 css selector (vm.$el)

    template: '', // Vue 인스턴스의 마크업으로 사용할 문자열 템플릿

    data: {}, // 화면을 그리는데 사용되는 데이터들(vm.$data)

    props: [], // 부모 컴포넌트로부터 전달받은 property들의 Array 또는 Object

    methods: {}, // 화면을 그리는데 사용되는 메소드들

    computed: {}, // 계산된 속성. getter와 setter는 자동으로 this context를 Vue 인스턴스에 바인딩함

    watch: {} //감시될 속성. 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 인스턴스가 아닌 하위 컴포넌트에서 사용될 때는 반드시 함수형이여야 함.

{
   value1:'this is value 1',// value1, value2를 객체의 속성이라고 이야기 하겠습니다. 
   value2:'this is value 2'
}

data 객체의 속성들이 변경되면, 화면에 자동으로 갱신됨.


new Vue({
  data() {
    return {
      // 이 값들이 변경되면 화면이 자동으로 갱신됩니다.
      msg:'함수형 data 입니다.',
      desc:'하위 컴포넌트에서 data는 반드시 함수형이여 합니다.'
    };
  }
  /* 혹은
  data: {
    msg: '객체형 data 입니다.'
    desc: 'Vue 인스턴스를 생성 할 때는 객체를 사용해도 됩니다.'
  }
  */
});


### 속성
- 부모 컴포넌트로부터 전달 받은 속성들의 Array 혹은 Object
```html
<div>
  <HellowWord title="Hello Vue" desc="Vue Instance" />
</div>

위의 코드와 같이 하위 컴포넌트를 호출하면 title와 desc를 props의 Array에 추가해 주어야 하위 컴포넌트에서 title과 desc를 사용할 수 있게 됩니다. 유효성 검사 및 기본값과 같은 고급 옵션을 사용하기 위해 Object를 사용할 수도 있습니다.

{
  props:['title','desc'],
  /* 혹은 고급 옵션을 사용하기 위한 Object
  props: {
    title: String, // 타입 설정
    desc: {
      required: true, // 필수값 설정
      default: '설명이 없습니다.' // 기본 값 설정
    }
  }
 */
}

computed (계산된 속성)

data를 미리 계산한 값들을 나타내는 함수들을 모아둔 객체.
setter을 만들지 않았다면 기본적으로 getter 기능만 제공.
표현식은 잘 못 사용할 경우 가독성이 떨어져 유지보수가 어려워 질 수 있음
Vue 인스턴스의 계산된 속성을 사용하면 종속성이 있는 데이터에 따라 캐시가 됨
종속성이 있는 데이터의 경우 methods보다 computed 를 사용

Watch (감시된 속성)

watch는 data와 한쌍을 이룸.
data에 표현된 key와 watch에 표현된 key의 이름은 동일해야 함.

data의 value 값이 변경이 되면, watch의 key의 value에 할당된 콜백이 실햄됨

{
data() {
return {
  msg:'메시지입니다'
}
}
watch: {
msg() {
  console.log('data의 msg가 수정되면 호출됩니다.');
}
}
}

methods

화면을 표현하는데 사용하는 모든 메소드들이 모여 있는 곳

{
  data() {
    return {
      a: 1
    };
  }
  methods: {
    plus() {
      this.a++;
    }
  }
}

라이프사이클

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

lifecycle

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

beyolk / study

02.Vue 인스턴스 #7

Vue 인스턴스란?

인스턴스 생성

데이터

computed (계산된 속성)

Watch (감시된 속성)

methods

라이프사이클