vue.js - 데어터와 메소드
메소드Permalink
- methods란 옵션 속성에 함수들을 정의한 객체 전달
데이터Permalink
- Vue 인스턴스의 data 객체에 있는 모든 속성을 프록시 처리
- 쉽게, 하나의 데이터로 공유하는 개념
예시
// 데이터 객체
var data = { a: 1 }
// Vue인스턴스에 데이터 객체를 추가합니다.
var vm = new Vue({
data: data
})
// 같은 객체를 참조합니다!
vm.a === data.a // => true
// 속성 설정은 원본 데이터에도 영향을 미칩니다.
vm.a = 2
data.a // => 2
// ... 당연하게도
data.a = 3
vm.a // => 3
- 데이터가 변경되면 화면을 다시 그립니다.
- 또, data에 있는 속성들은 인스턴스가 생성될 때 존재하는 것들만 반응형(새롭게 렌더링)으로 처리합니다.
- 즉, 중간에 Vue 인스턴스에 새로운 속성이 추가되고, 해당 속성이 변경되더라도 새롭게 그리지 않습니다.
- 만약, 나중에 필요하다면, 다시 그리기 위해서 초기값을 지정해야합니다.
- 예외 사항으로는 Object.freeze()를 사용한 경우입니다. freeze가 적용된 객체는 변경되더라도 다시 그리지 않습니다.
예시
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
계산된 속성(Computed)Permalink
- 메소드 수행결과가 캐싱되어 처리됩니다.
- 메소드 속성처럼 정의하고, 데이터 속성처럼 사용합니다.
- code pen의 1번 예제의 console을 확인하면 해당 속성을 3번 호출하였지만 1번만 log가 나오듯이 미리 처리된 값입니다.
- 또, computedProperty속성은 외부에서 값을 변경할 수 없는 읽기전용 속성입니다.
- 이 값을 변경하기 위해서는 Vue인스턴스의 data옵션으로 정의된 속성을 사용하면 반응형으로 변경할 수 있습니다.
- data옵션으로 정의된 속성을 사용한 경우 계산된 속성은 해당 속성의 의존관계가 형성됩니다.
- 2번 예제의 chage버튼을 누르면, data옵션이 변경되고 그에 따라 의존관계인 계산된 속성이 변경(해당 부분 업데이트)됩니다.
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.
참고