1 개 관측 데이터 (관찰 가능한)
관찰 가능한 변화는 데이터의 방법에있어서 관찰 할 수있다.
그 데이터를 관찰 할 수있다?
- 원본 유형
문자열, 숫자, 부울, 기호
- 객체
- 배열
코드는 데이터가 관측 얼마나 감사 :
1)는 NPM mobx의 의존도를 장착
명령을 실행 NPM 내가 mobx -S
2)하는 index.js 파일에서 가져 오기 기능은 패키지 mobx에서 관찰 할
수입 'mobx'에서 {관찰};
3) 관찰 대상으로 관찰하여 변수
를 처리하는 방법은 두 가지가 있습니다, 어떤 변수를 mobx :
-지도하고있는 객체의 배열 ES6
객체를 변환하는 함수로서 직접 관찰 변수는 다음에, 관찰 될지도 어레이 적절한 동작 데이터.
> 배열 (어레이)
'mobx'에서 관찰 {오기, isArrayLike}
// 오기 관찰 {}에서 'mobx';
CONST 관찰 ARR = ([ 'A', 'B', 'C']);
CONSOLE.LOG (ARR [0] ( 'D')) arr.push,
결과를 직접 관찰 할 수있는 함수가 리턴 배열 및 도입 isArrayLike 모듈 아니다 // 경우, 반환 된 배열에 상당
// 배열 방식의 번호를 사용할 수 있지만, 수없는 공중 주목 액세스 또는 방법을 배열 데이터 배열 경계를 변경, mobx는 국경 액세스를 모니터링하지 않습니다
> 오브젝트 (객체)
; 오기 'mobx'에서 관찰 {}
; CONST 관찰 OBJ = (. 1 {A :. 1, B})
CONSOLE.LOG (obj.a, obj.b)
기존 데이터만을 모니터링 할 수 // mobx 당신이 새로 추가 된 특성을 모니터링 할 경우, extendObservable () 메소드를 제공 mobx 사용합니다.
이 모든 절차의 속성이 사용됩니다 보여줍니다 초기화 //이 프로그램에 가장 적합합니다.
>지도
; 오기 'mobx'{}에서 관찰
CONST = 관측지도 (지도의 새로운 새 ());
map.set ( 'A',. 1)
상기 CONSOLE.LOG (map.has ( 'A'))
'(map.delete A ');
을 console.log (map.has는 ('A '));
배열의 유사한 유형 및 // 반환 된 결과는 성능 맵에 진정한지도,하지만 가까이 충분하지 않습니다,지도 일부 메소드를 호출 할 수 있습니다
- 다른 유형
변수의 직접 할당을 모니터한다 후 등의 문자열, 숫자, 부울 같은 일부 원시 데이터 타입, 변수 래퍼 객체 호출 observable.box 필요가 관찰된다.
; 오기 'mobx'{}에서 관찰
CONST NUM = observable.box (20 임);
CONST = observable.box STR ( '헬로');
CONST = BOOL observable.box (true로);
// CONSOLE.LOG (NUM, STR , 불리언) 패키징 된 데이터를 관찰 할 수 // 복귀
CONSOLE.LOG (num.get () str.get () bool.get ());
num.set (1).
str.set ( '~ 안녕하세요');
(거짓으로) bool.set;
CONSOLE.LOG (num.get () str.get () bool.get ());
// 세트와 원래 형태의 얻어진 값을 사용하는 방법을 얻을 원래 형의 값을 수정하는 방법
4) 변형 선언 관찰 장식 오브젝트를 사용
장식은 우리가 클래스를 생성 할 수 있도록, 수업 시간에 관찰하여 관찰 할 수있는 데이터를 생성, 클래스 또는 클래스의 멤버를 수정할 수 있습니다.
현재의 함수로 관찰의 단순화 mobx 조작 된 API 기능하기 위해서는 식별 할 수 정상적인 기능 여전히 간주됩니다 호출 데코레이터 은 if로, 전화 수정은 자동으로 변수의 유형을 식별하고, 다른를 사용하여 호출 할 변환 프로그램을 포장.
'mobx'에서 가져 오기 {관찰, isArrayLike};
클래스 스토어 {
@observable 배열 = [];
@observable OBJ = {};
@observable지도 새지도 () =;
@observable 문자열 = '안녕하세요';
@observable 수 = 20;
@observable BOOL = 거짓;
}
두 쌍 (I 객체가 수정 어떻게 알 수 있습니까?) 데이터에 반응 관찰