Front

[Vue]뷰 인스턴스 생성

1223gogo 2023. 5. 22. 20:30

1. 뷰 인스턴스란?

뷰 인스턴스(Vue Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본단위이다.

 

1.1. 뷰 인스턴스 형식

new Vue({
	...
});

1.2. 뷰 인스턴스 생성

* vue 2.5.2문법을 따라 실습하였습니다.

<htlml>
    <head>
        <title>Vue Sample</title>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data : {
                    message : 'Hello Vue.js!'
                }
            });
        </script>
    </body>
</htlml>

위의 htlm파일을 열었을 때 실행되는 결과(vue.js devtools 크롬확장프로그램을 다운받으면 위와같은 개발자도구를 이용할 수 있다.)

1.2.1. 뷰 인스턴스 옵션 속성

인스턴스를 생성할 때 재정의할 el, data, template, methods, created 등의 속성을 의미한다. 

위의 예제에서는 아래와 같이 속성이 사용되었다.

- el : #app(CSS선택자규칙과 같음.) id가 app인 태그를 찾아서 적용하여 사용함. 뷰로 만든 화면이 그려지는 시작점을 의미한다. 화면이 그려질 위치의 돔 요소를 지정해줌.

- data: message라는 새로운 속성을 추가하고 그에 값(Hello Vue.js!)을 주어 {{ message }}와 연결하여 사용함.

1.2.2. 뷰 인스턴스 생성자

- new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다.

- 뷰 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.

1.2.3. 왜 생성자를 사용할까?

개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서이다. 

2. 뷰 인스턴스 라이프 사이클

* 라이프 사이클 : 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기

* 커스텀 로직 : 개발자가 임의로 작성한 추가 로직

 

- 라이프 사이클(life cycle) 속성: 인스턴스의 상태에 따라 호출할 수 있는 속성

- 라이프 사이클 훅 : 각 라이프 사이클 속성 사이에서 실행되는 커스텀 로직

 

뷰 인스턴스 라이프 사이클은 크게 4단계로 이루어진다.

1.생성 -> 2.부착 -> 3.갱신 -> 4.소멸

2.1. 인스턴스 생성 및 부착

0. new Vue()로 인스턴스가 생성된다.

1. 이벤트 및 라이프사이클 초기화

2. beforeCreate

  • data, method 속성모두 정의 X
  • 화면요소(돔)에도 접근 X

3. 화면에 반응성 주입

4. created

  • data, method 속성 정의 O -> this.data, this.fetchData() 가능
  • template속성에 정의된 돔 요소 접근 X

5. el, template 속성 확인

6. template 속성 내용을 render()로 변환

7. beforeMount

  • render()함수 호출되기 전의 로직 추가 용이

8. $el 생성 후 el 속성값을 대입

9. mounted

  • template속성에 정의된 돔 요소 접근 O
  • 화면 요소 제어하는 로직 수행 용이

10. 인스턴스를 화면에 부착

 

2.2. 인스턴스 내용 갱신

* 데이터가 변경되는 경우에만 적용됨.

1. 인스턴스의 데이터 변경

2. beforeUpdate

  • 반영 예정인 새 데이터에 접근 가능
  • 변경된 값과 관련된 로직 미리 넣기 용이

3. 화면 재 렌더링 및 데이터 갱신

4. updated

  • 데이터 변경 후 화면 요소 제어와 관련된 로직 추가 용이

5. 인스턴스 내용 갱신

2.3. 인스턴스 소멸

1. 인스턴스 접근가능

2. beforeDestroy

  • 뷰 인스턴스의 데이터 삭제하기 용이

3. 컴포넌트, 인스턴스, 디렉티브 등 모두 해제

4. destroyed

 

 

 

http://www.yes24.com/Product/Goods/58206961

 

Do it! Vue.js 입문 - YES24

Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j

www.yes24.com