02-1 뷰 인스턴스

뷰 인스턴스의 정의와 속성

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

 

뷰 인스턴스 생성

 - Hello Vue!  텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성

 - 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정

 - data 속성에 message 값을 정의하여 화면의 {{message}}에 연결

 

뷰 인스턴스 생성자

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

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

 - 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고,

   사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함이다.

 

* 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을, 미리 특정 객체에 저장해 놓고,

             새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법이다.

             일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를

             재활용하기 위해 사용한다.

   

뷰 인스턴스 옵션 속성

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

 - el 속성 : 미리 정의 되어 있으며, 뷰로 만든 화면이 그려지는 시작점을 의미

               뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야한다.

- data 속성 : 미리 정의되어 있는 속성을 사용하며,  data 안에 message라는 새로운 속성을 추가하고

                 hello라는 값을 주었을 뿐이다.

  

#app 값은 화면의 돔 요소 중 app라는 아이디를 가진 요소를 의미한다.

#선택자는 CSS 선택자 규칙과 같다.

 

 - 이 외에도 template, methods, created등 미리 정의되어 있는 속성을 사용할 수 있다.

 

뷰 인스턴스의 유효범위

 - 유효범위란?

   -> 뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타나며,

       이를 인스턴스의 유효범위라고 한다.

   -> 인스턴스의 유효범위는 el 속성과 밀접한 관계가 있다.

 - 인스턴스의 유효 범위는 el 속성으로 지정한 <div id="app"> 태그 아래에 오는 요소들로 제한된다.

   따라서 div 태그 바깥에 {{message}}가 존재 한다면 뷰에서 인식하지 못하며 hello가 아닌 {{message}}가 

   그대로 출력된다.

 

<인스턴스가 화면에 적용되는 과정>

 1. 뷰 라이브러리 파일 로딩

 2. 인스턴스 객체생서(옵션 속성포함)

 3. 특정 화면요소에 인스턴스를 붙임

 4. 인스턴스 내용이 화면 요소로변환

 5. 변환된 화면 요소를 사용자가 최종 확인

 

뷰 인스턴스 라이프 사이클

 - 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 송석이라고 한다.

 - 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅 이라고한다.

 - 라이프 사이클 속성에는 created, beforeCreate, beforeMount, mounted 등

   인스턴스의 생성, 변경 소멸과 관련된 총 8개가 있다.