[ Vue 04 ] Vue 인스턴스 및 라이프사이클

 [ Vue 인스턴스 및 라이프사이클 ]

Vue 인스턴스와 라이프사이클에 대해 알아봅시다.

VueJs는MVVM패턴에 연계되어 구성된 프레임워크입니다. (* [디자인패턴] MVVM 설명  참고*) 링크를 누르시면 관련 설명으로 이동됩니다! 한번 읽어보시고 오세요.

일단 Vue인스턴스에 대해 먼저 소개해드리겠습니다.

[ Vue 인스턴스 ]

가장 간단하게

New Vue를 통해서 Vue 인스턴스를 선언할 수 있습니다.

Vue로 어플리케이션을 만들기 위해서는 Vue인스턴스를 먼저 선언해야합니다.

Vue인스턴스가 최종 루트이고 그 아래에 하위 컴포넌트들이 선언되서 붙어있는 형식입니다.

그림으로 참고하자면 아래와 같습니다.

Root Instance

Root Instance

└─ TodoList

   ├─ TodoItem

   │  ├─DeleteTodoButton

   │  └─EditTodoButton

   └─ TodoListFooter

      ├─ ClearTodosButton

       └─ TodoListStatistics

Vue 인스턴스를 생성 할 경우

data, method, 라이프사이클을 포함 하는 객체들도 같이 선언해야 합니다.

**필요한 라이프사이클들만 선언하면 됩니다.

New Vue 인스턴스

new Vue

({ 

components:
{

// 하위
컴포넌트들을 넣어놓습니다. 



** 주의할점은 하위 컴포넌트 파일이 .vue파일내에 import되어 호출된 상태여야합니다.

}, 



data() { 

// 화면을 구성하는데 사용되는 데이터 변수 값들을 지정해서 넣어놓는 구간입니다.

 }, 



methods: {

         // 화면을 구성할때 사용되는 메소드들을 넣어놓는 구간입니다.

},



created() { 

// DOM(=Component)이 create되게전에 실행되는 라이프사이클입니다.

}, 



mounted() { 

// DOM(=Component)이 화면상에 렌더링 된 후에 실행되는 라이프사이클입니다.

}, 



destoryed()
{

         // 컴포넌트가 화면상에서 제거됐을 경우에 실행되는 라이프사이클입니다.

}

});

[ Vue 인스턴스 생성 시 호출 옵션 ]

1) data

데이터 객체를 리턴하는 함수이거나 혹은 데이터 객체 그 자체입니다.

***Root 인스턴스가 아닌 Vue 하위 컴포넌트에서 사용할 때는 반드시 함수로 리턴해야합니다.

*data객체안의 속성값들이 변경될 경우 화면이 자동으로 data binding을 통해 업데이트됩니다.

선언방식

1) new Vue({

data() {

 return {};

}})

2) new Vue({

data: {

 return {};

}})

2) props

상위 컴포넌트로부터 전달 받은 Props입니다. 형식은 Array 혹은 Object입니다.

주로 Props는 상위 컴포넌트에서 하위 컴포넌트로 넘겨집니다.

3) computed

data 옵션에서 계산된 값들을 데이터 가공처리합니다. setter를 직접 만들어야 하지만 getter는 기본으로 제공됩니다

[ Vue Js 라이프사이클 ]

Vue Js의 라이프사이클은 아래 그림에 나타나 있습니다.