Vue 데이터 기반 시뮬레이션 구현 2

1. 서문

"Vue 데이터 드라이버 시뮬레이션 1" 에세이 마지막 부분에서 모니터링되는 속성이 객체라면 어떻게 될까요? 그러면 이 개체의 다른 속성을 모니터링하는 것은 불가능하지 않을까요?

은 다음과 같습니다.

사용자의 이름과 연령 속성이 변경된 경우 변경되었는지 어떻게 알 수 있나요?

오늘은 이 문제를 해결해 보겠습니다.

Vue 소스 코드를 읽어보니 Observer 생성자를 사용하여 각 객체에 대해 Observer 객체를 생성하여 데이터를 모니터링하는 것을 발견했습니다. 관찰자.

사실 핵심 아이디어는 트리의 선주문 순회입니다(트리에 대해서는 여기를 참고하세요). 위 데모의 데이터를 그래프로 나타내면 다음과 같이 더 명확해집니다.

자, 이제 일반적인 아이디어를 명확히 했으니 함께 해봅시다. 관찰자.

2. Observer 구조

Observer의 전체적인 구조는 다음과 같습니다.

function Observer(data){
 //如若this不是Observer对象，即创建一个
 if(!(this instanceof Observer)){
 return new Observer(data);
 }
 this.data = data;
 this.walk(data);
}
 
let p = Observer.prototype = Object.create(null);
 
p.walk = function(data){
 /*
 TODO:监听data数据中的所有属性，
 并查看data中属性值是否为对象，
 若为对象，就创建一个Observer实例
 */
}
 
p.convert = function(key, val){
 //TODO:通过Object.defineProperty监听数据
}

자, 산책을 완료하고 변환 방법.

-walk-

먼저 다음과 같이 walk 메소드로 데이터 객체의 모든 속성에 대한 모니터링을 구현합니다.

p.walk = function(data){
 let keys = Object.keys(data);
 keys.forEach( key => {
 let val = data[key];
 this.convert(key, val);
 });
}

그리고 속성이 객체일 수 있으므로 이를 모니터링해야 합니다.

어떻게 해야 하나요?

객체인 경우 Observer 생성자를 다시 사용하여 처리합니다.

은 다음과 같습니다.

p.walk = function(data){
 let keys = Object.keys(data);
 keys.forEach( key => {
 let val = data[key];
 //如果val为对象，则交给Observer处理
 if(typeof val === 'object'){
  Observer(val);
 }
 this.convert(key, val);
 });
}

이런 의문이 드실 수도 있는데, Observer를 사용하여 직접 객체를 처리하면 부모와의 연결이 끊어지지 않을까요? 물체?

그러나 그렇지 않습니다. JavaScript는 객체의 주소 관계를 가리키기 때문에 어떻게 연관을 잃을 수 있습니까?

-convert-

변환 방법은 비교적 간단합니다. 언제나 그렇듯 Object.defineProperty를 사용하여 다음과 같이 데이터를 모니터링합니다.

p.convert = function(key, val){
 Object.defineProperty(this.data, key, {
 get: ()=>{
  console.log('访问了'+key+' 值为'+val);
  return val;
 },
 set: (newVal)=>{
  console.log('设置了'+key+' 值为'+newVal);
  if(newVal !== val){
  val = newVal;
  }
 }
 });
}

자, 이제 간단한 Observer가 구성되었습니다. 이제 각 속성이 성공적으로 모니터링되었는지 테스트해 보겠습니다.

<script src="./observer.js"></script>
<script>
 let data = {
 user: {
  name: &#39;Monkey&#39;,
  age: 24
 },
 lover: {
  name: &#39;Dorie&#39;,
  age: 23
 }
 };
 Observer(data);
</script>

효과는 다음과 같습니다.

위 내용이 이 글의 전체 내용이길 바랍니다. 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 모두가 지원해 주시길 바랍니다.

Vue 데이터 기반 시뮬레이션 구현 2가지 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!