[vue.js 기초] 뷰 인스턴스(vue instance)

 

vue 인스턴스

• 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 할 기본 단위이다.
• 각 뷰 인스턴스는 데이터 객체 안에 있는 모든 속성을 프록시 처리한다.(데이터 변경시 자동으로 DOM을 업데이트함)

var vm = new Vue({ //인스턴스에서 사용 가능한 속성과 api들
  el: , // DOM의 시작점
  template: , // 화면에 표시되는 요소
  data: , // 데이터 속성
  methods: , // 로직 제어
  created: , // 라이프 사이클 관련된 속성
  watch: , // data 변경 시 추가 동작을 수행할 수 있도록 함 });

$data

// 1. 대이터 객체 생성
var data = {a : 1}

// 2. 뷰 인스턴스에 데이터 객체 추가
var vm = new Vue({ data : data })

// 3. 둘이 같은 객체임
vm.a == data.a

// 4. 설정은 원본에 반영됨
vm.a = 2

4번과 같이 데이터가 변경되면 화면은 다시 렌더링된다. 단. 데이터에 있는 속성은 인스턴스가 생성될 때 존재한 것에만 반응형임.

vm.new = 'new' // 화면 갱신 안됨