Vue 인스턴스

Vue 인스턴스

Vue 인스턴스 만들기.

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작한다.

Vue 인스턴스를 인스턴스화 할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 options 객체를 전달해야 한다.

Vue 생성자는 미리 정의 된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 될 수 있다.

확장된 인스턴스를 만들수는 있으나 대개 템플릿에서 사용자 지정 엘리먼트로 선언적으로 작성하는 것이 좋다.

이 부분에 대한 설명은 컴포넌트 시스템에 대해서 확인 할 수 있다. 지금으로서는 모든 Vue 컴포넌트가 본질적으로 확장된 Vue 인스턴스라는 것을 알아야 한다.

속성과 메소드

각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리한다.

여기서 프록시 처리한다 함은 data 옵션에 주어진 모든 속성들은 Vue 인스턴스 내부에서 직접 이용되지 않고 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시(감시자)를 두어 처리를 한다는 의미이다.

Vue 인스턴스를 생성한 변수가 vm 이면 값에 접근할 때 vm.name 으로 가능하다. 직접 data 에 접근하려면 vm.$data.name 으로 접근한다.

데이터가 변경되면 화면도 다시 렌더링 되는데, 이 때 주의할 점은 data 에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이라는 것이다.

즉 Vue 인스턴스를 생성한 후, 인스턴스를 생성할 때 존재한 것이 아닌 다른 변수를 추가하고, 해당 속성을 바꾸어도 화면이 갱신되지 않는다는 의미이다.

그러므로 어떤 속성이 나중에 필요하게 될 것이기 때문에, 빈 값이나 존재하지 않는 상태로 시작한다면 초기값을 지정해 줄 필요가 있다.

여기서 유일한 예외는 Object.freeze() 을 사용 하는 것이다.

이는 기존 속성이 변경되는 것을 막아 반응성 시스템이 추적할 수 없다는 것을 의미한다.

아래 예제에서 'Change it' 을 클릭 해 보면, 아무런 반응이 나타나지 않는 것을 확인 할 수 있다.

Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공해준다. 다른 사용자 정의속성과 구분하기 위해 $ 접두어를 붙여둔다.