Vue.js 러닝 가이드북

데이터(Data)

컴포넌트의 상태(data)는 반드시 함수에서 객체를 반환해야 합니다.

data() {
  return {}
}

// 또는 ES 6+ 화살표 함수 활용
// 단! 속성 값에 this를 사용할 경우, 이 방법은 의도치 않는 문제가 발생함에 주의

data: () => ({

})
1
2
3
4
5
6
7
8
9
10

함수에서 객체를 반환하는 이유

컴포넌트의 data를 일반 객체로 사용하면 컴포넌트에 의해 생성된 모든 Vue 인스턴스는 동일한 객체를 참조로 공유하는 문제가 발생합니다. 그러므로 data를 함수로 제공해 컴포넌트에 의해 Vue 인스턴스가 생성될 때마다 이를 호출하여 초기 데이터의 새로운 복사본을 반환하게 하는 것입니다.

속성 프록시

그리고 상태 객체에 등록된 각 속성을 프록시(Proxy) 합니다.

NOTE. 프록시(대리) 처리

Vue 인스턴스의 상태 객체 속성에 접근하려면 다음과 같이 코드를 작성해야 합니다.





 




export default {
  methods: {
    logTitle() {
      // vueInstance.$data['속성이름']
      console.log(this.$data.title);
    }
  }
}
1
2
3
4
5
6
7
8

하지만 Vue 인스턴스는 상태 속성을 대리하여 직접 접근 가능하게 만들어줍니다.





 




export default {
  methods: {
    logTitle() {
      // vueInstance['속성이름']
      console.log(this.title);
    }
  }
}
1
2
3
4
5
6
7
8

주의!

_, $로 시작하는 속성은 Vue 내부 속성, API 메소드와의 충돌 문제로 Vue 인스턴스에서 프록시 되지 않습니다. vueInstance.$data를 통해 속성에 접근 해야 합니다.







 




export default {
  methods: {
    logTitle() {
      // vueInstance.$data['_속성이름']
      // vueInstance.$data['$속성이름']
      console.log(this._title); // ✘
      console.log(this.$data._title); // ✔︎
    }
  }
}
1
2
3
4
5
6
7
8
9
10

참고

보다 자세한 사용법은 데이터 문서를 참고하세요.

← 메서드 →