속성 반응
앞서의 속성 바인딩에서는 간단한 속성 반응 메커니즘, 즉 컴포넌트의 속성 값을 텍스트로 렌더링하는 방법을 소개했습니다.
ofa.js는 기본 속성 값에 대한 반응을 지원할 뿐만 아니라 다중 중첩 객체 내부 속성 값에 대한 반응형 렌더링도 지원합니다.
count: {{count}}
count2: {{obj.count2}}
ofa.js 인스턴스 객체에 바인딩된 모든 데이터는 자동으로 반응형 데이터로 변환됩니다. 반응형 데이터는 문자열, 숫자, 불리언, 배열, 객체 등 기본 데이터 타입만 지원합니다. 함수, 클래스 인스턴스 등 복잡한 데이터 타입은 비반응형 속성으로 저장해야 하며, 이러한 속성의 변경은 컴포넌트의 재렌더링을 유발하지 않습니다.
비반응형 데이터
때때로 Promise 인스턴스, 정규 표현식 객체 또는 기타 복잡한 객체와 같이 반응형 업데이트가 필요 없는 데이터를 저장해야 하는 경우가 있습니다. 이때는 비반응형 속성을 사용해야 합니다. 이러한 속성의 변경은 컴포넌트의 재렌더링을 트리거하지 않으므로 뷰 연동이 필요 없는 데이터 저장에 적합합니다.
비반응형 속성의 명명은 일반적으로 속성 이름 앞에 밑줄 _를 접두사로 붙여 반응형 속성과 구분합니다.
count: {{count}}
count2: {{_count2}}
Green增加 버튼을 클릭할 때, _count2의 값은 실제로 증가했지만 반응형 속성이 아니므로 뷰 업데이트가 트리거되지 않아 인터페이스에 표시되지 않습니다. Blue增加 버튼을 클릭하면 count는 반응형 속성이므로 전체 컴포넌트의 리렌더링을 트리거하고, 이때 Green의 표시 내용이 동기화되어 업데이트됩니다.
비반응형 객체 데이터는 반응형 객체 데이터보다 성능이 더 좋습니다, 비반응형 데이터는 컴포넌트의 재렌더링을 트리거하지 않기 때문입니다.