[Vue.js] 3. Vue 인스턴스의 속성과 메소드 그리고 기초

해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면

Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기

 

 

Vue 인스턴스

var vue=new Vue({
// 옵션
})

NPM,CLI,CDN 등 자신이 택한 방식으로 Vue를 선언한 후

Vue를 사용하기 위해선 새로운 Vue 인스턴스를 만드는 것부터 시작합니다.

그 후 옵션들을 사용하여 원하는 동작을 구현합니다. 전체 옵션은 API reference에서 확인하실 수 있습니다.

 

데이터와 메소드

 

// 1번째
var vue=new Vue({
 data:{ a:1 }
})

// 2번째
var value={a:1}
var vue=new Vue({
 data:value
})

위와 같이 선언된 data들은 Vue의 반응형 시스템에 추가 되고 각 속성값이 변경될 때마다 뷰가 반응하여 새로운 값과

일치하도록 업데이트됩니다.

 

※주의사항

var value={a:1}

var vue=new Vue({
 data:value
})

value.a=3 
console.log(vue.a)  // 3

vue.a=4
console.log(value.a) // 4

 

이처럼 데이터값은 주소값으로 저장되어 있어 원본 데이터와 인스턴스 데이터에 영향을 미칩니다. 그리고 변경된 데이터를 화면에 다시 표시합니다. 이처럼 data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이라는 것입니다.

 

 

※반응형 데이터 유의할 점 (중요!)

 

<div id="app">
   <textarea>{{a}}</textarea>
   <textarea>{{b}}</textarea>
   <button @click="change1">
     값 변경1
   </button>
   <button @click="change2">
     값 변경2
   </button>
   <button @click="change3">
     값 변경3
   </button>
</div>

new Vue({
  el: '#app',
  data: {
  	a:3,
  },
  methods:{
    change1(){
      this.a=4;
    },
    change2(){
      this.b=4;
    },
    change3(){
    	this.a=5;
      this.b=5;
    },
  }
})

https://jsfiddle.net/qudcks0703/y1zef7or/50/

☆해석

버튼1= a값을 4로 변경

버튼2= b값을 4로 변경

버튼3= a,b값을 4로 변경

결과는 실제 변경되서 화면에 표시되는 버튼은 버튼1과 버튼3입니다.  왜 그럴까요?

먼저 a는 vue 인스턴스의 data로서 선언이 되어있어 반응형 데이터가 되었고 b는 반응형 데이터가 아닙니다.

이때 버튼 1을 실행하면 a의 값은 Vue가 인지하고 변경한 후 화면에 표시를 합니다. 

버튼 2를 실행하면 b가 있음을 알지 못하고 Vue는 화면에 표시하지 않습니다. 하지만 this.b는 실제로 4를 가지고 있습니다. (콘솔로 확인 바람)

버튼 3을 실행하면 a가 변경되는 걸 Vue가 인식하고 change3이라는 메서드 전체가 끝난 후에 반응을 합니다. 그러기 때문에 b의 값이 표시가 됩니다.

* Object.freeze(변수)를 작성하면 기존 속성이 변경되도 반응성 시스템이 추적 할 수 없어 바뀌지 않음!

 

이처럼 Vue 인스턴스 내에 data를 넣어서 반응형 데이터를 만들건지, 안만들건지 또한 중요한 관건이 될 것 같내요.

- 저는 실무에서 이것때문에 꽤나 고생했답니다.. 이래서 기초가 중요하구나 싶더라구요..

 

이 외에도 Vue 인스턴스는 자신만의 유용한 인스턴스 속성 과 메서드를 제공합니다. 다른 속성과 메서드를 구분하기 위해 $접두어를 붙여 사용합니다.

vm.$data = vue의 데이터

vm.$el = el태그의 정보

등  API reference에서 인스턴스 속성과 메소드 전체 목록을 살펴보세요.