뷰 인스턴스의 유효범위

[뷰 인스턴스의 유효범위]

 

⛳️ 뷰 인스턴스의  유효범위

뷰 인스턴스를 생성 시 HTML 의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다.

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

 

즉, 뷰 인스턴스에 정의한 영역이 적용되는 영역을 의미한다.

 

이를 자세하게 이해하기 위해서 인스턴스 생성 시 화면에 어떻게 적용되는지 살펴보자.

 

| 뷰 인스턴스가 화면에 적용되는 과정

 

1) 인스턴스 생성자 실행

- 인스턴스 옵션 속성인 el, data를 인스턴스에 정의하고 new Vue로 인스턴스를 생성한다.

 

2) el 에 인스턴스 적용

- 특정 화면요소 에 인스턴스 부착.

ex. #app - > app id 를 가진 dom 영역에 인스턴스 적용하여

지정한 화면 요소와 그 이하 레벨의 화면요소에 값 치환하여 적용

 

3) 인스턴스 내용이 화면 요소로 변환

<div id="app">
        {{ message }}
        <!-- "Hello Vue.js!!" -->
    </div>

 

message 부분이 Hello Vue.js !! 로 치환되어 적용

 

4) 실행 시 확인 가능

 

✔️ 영역 밖에 정의할 경우 인스턴스가 적용되지 않음

<div id="app">
    </div>
{{ message }}

        {{ message }}  그대로 출력됨