뷰 인스턴스

Reactivity 반응성

• 데이터의 변화가 있으면 새로고침 없이 변화를 감지해서 반응하는 것

 

뷰 인스턴스

• new Vue() 형태로 생성한 객체
• Vue로 개발할 때 필수로 생성해야하는 생성자
• 필요한 기능을 생성자에 미리 정의해 두고 그 기능을 재정의하여 사용함
• 뷰 인스턴스를 참고하기 위한 변수로 vm을 자주 사용(VeiwModel의 줄임말)
  
  • var vm = new Vue()
  • vm으로 Vue 라이브러리는 사용할 수 있음

 

인스턴스란?

• 프로그램에서 객체를 실체화한 것 = 실제로 동작할 것
• 실체화된 인스턴스는 메모리에 할당됨

var vm = new Vue({
  // options
})

vm 변수에 인스턴스를 담으면 new에 의해 메모리에 빈 공간이 생성된다.

 

생성자 함수

• 객체 리터럴 {...}을 사용하면 객체를 만들 수 있다.
• 그런데 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 있다.
• new 연산자와 생성자함수를 사용하면 유사한 객체를 여러 개 만들 수 있다.
• 생성자 함수는 일반 함수와 기술적으로 동일하지만 규칙이 있다.
  • 함수 이름 첫 글자는 대문자로 시작한다
  • 함수를 실행할 때 new 연산자를 사용한다
• new 함수이름(...) 가 실행되면 빈 객체가 생성되고 이 객체를 this에 할당한다.
  • this = {}; this라는 빈 객체가 만들어짐
• this에 새로운 프로퍼티가 추가된다.
• this를 반환(return)한다. 그렇기게 별도로 ruturn문을 작성하지 않는다.

function Person(name, job){
	this.name = name;
	this.job = job;
}

var p = new Person('jane', 'worker');

 

왜 vue는 생성자함수를 쓰는가?

function Vue(){
	this.logText = function() {...}
}

var vm = new Vue();

vm.logText();

vm가 실행되면 새로운 객체가 생성되고 그 객체 안에 미리 정의된 logText() 함수를 사용할 수 있다

즉, Vue에 미리 정의된 속성들을 가져다 쓰기위해 생성자함수를 사용한다. 

 

인스턴스 옵션

• el: element의 약자로 Vue가 실행될 때 body 태그 안에서 #app을 찾아 인스턴스를 붙이는 역할
• template: 화면에 표시될 요소
• data: Vue가 바라보는 데이터 객체를 작성하거나 지정, Reactivity되는 데이터
• methods: 데이터 객체 등을 사용하여 계산된 값을 리턴
• created: 뷰 인스턴스가 생성되자마자 실행할 로직
• watch: 지정된 변수를 지켜보고 있다가 값이 변경되면 정의된 함수를 실행

var vm = new Vue({ // 생성자 안에는 인자로 객체{}를 넣음
  el: '#app', // body에서 app이라는 태그를 찾아 인스턴트를 붙임
  data: {
    message: 'hi'
  },
  methods: {
  },
  created: function() {
  }
});