2020. 5. 26. 15:57ㆍ카테고리 없음
const vm = new Vue({
el : "",
data: {},
computed :
})
다음과 같이 생성자로 만든 객체. 이 객체를 vue인스턴스라 부릅니다. vm이라는 Vue인스턴스를 생성했는데 생성할 때 전달하는 속성들을 담은 객체를 '옵션 객체'라고 부릅니다.
옵션객체 el, data, computed옵션
data 옵션
data옵션에 주어진 모든 속성들은 Vue 인스턴스 내 부에서 직접 이용되는 게 아니라
Vue 인스턴스 - 객체 사이에 프록시를 두어 처리합니다.
el 옵션
Vue인스턴스에 연결할 HTML DOM element를 직접 지정.
*주의 : 여러 개의 요소에 지정할 수 없습니다*
CSS클래스를 이용하면 여러 HTML요소에 연결할 수 있을지 않을까 했지만, 첫 번째 요소에만 연결됩니다.
실행 도중 독적으로 Vue 인스턴스와 HTML요소를 연결할 수 있지만, 가능하면 el옵션은 Vue인스턴스 생성할 떄 미리 지정하는 게 좋습니다.
computed 옵션
단순한 바인딩이 아닌 복잡한 계산이 들어가는 경우 computed를 이용해 연산에서 처리할 수 있습니다. java처럼 getter/setter가 있는데, get메서드로 데티어 속성의 값을 처리하고 set메서드로 데이터 속성에 할당할 수 있습니다.
메서드
Vue 인스턴스에서 사용할 메서드를 등록하는 옵션입니다.
메서드를 등록하면 인스턴스를 이용한 직접호출 / 디렉티브 표현식 / 콧수염 표현식 에서도 사용가능 합니다.
메서드와 computed 옵션(계산형 옵션)은 결과적으로 같아 보이지만 내부 동작에서 차이가 있습니다.
차이점
* computed 속성 - 종속된 값에 의해 결과값이 caching.
한 번 결과된 값을 다음에 다시 부르면 캐싱된 값 리턴해서 빨리 불러온다.
* 메서드 - 매번 실행시켜서 결과물 리턴.
관찰 속성
뷰에서 하나의 데이터를 기반으로 다른 데이터를 변경해야할 때 흔히 computed 속성으로 사용하는데,
관찰 속성( watched 속성 )을 사용할 수도 있습니다.
주로, 긴 처리 시간이 필요한 비동기 처리에 적합합니다. watch옵션을 이용해 관찰 속성을 등록합니다.