<p>app.js에서 vue객체를 만들고 그안에 데이터를 정의할 때에는 data : { query: ''} 이런식으로 키-값 형식으로 정의하셨는데, vue compoment에서는 data(){ return{query:''}} 이런식으로 함수 형식으로 정의하셨더라구요. 왜그런지 알 수 있을까요?</p>

<p>어플리케이션에서 유일한 인스턴스라면 data: {} 로 사용해도 됩니다. 하지만 두개 이상의 인스트턴스가 있을 경우는 서로 data을 공유하기 때문에 뷰 인스턴스간의 같은 데이터를 바라보는 상황이 생기죠. 한 컴포넌트가 데이터를 변경하면 다른 컴포넌트에도 영향을 미치는... 그렇기 때문에 여러 인스턴스로 만들 컴포넌트는 매번 새로운 데이터를 반환하도록 data() 함수로 사용하는 것입니다.</p>

인프런 커뮤니티 질문&답변

vue, vue component