vue 데이터 양 방향 바 인 딩 원리 분석(get&set)

전단 의 데이터 양 방향 바 인 딩 은 view(보기)와 model(데이터)의 관 계 를 말 합 니 다.view 층 은 페이지 에서 사용자 에 게 보 여 주 는 정보 입 니 다.model 층 은 http 를 통 해 배경 에서 돌아 오 라 고 요청 하 는 데 이 터 를 말 합 니 다.view 에서 model 까지 의 바 인 딩 은 모두 이벤트 리 셋 함 수 를 통 해 작 동 되 며,model 에서 view 까지 의 바 인 딩 은 여러 가지 방법 이 있 습 니 다.
angular,react,vue 등 뮤 직 비디오*모델 의 프레임 워 크 는 모두 데이터 양 방향 연결 을 실현 했다.angular 는 더러 운 검사 즉 신 구 데이터 의 비 교 를 통 해 어떤 데이터 가 변 했 는 지 확인 하고 view 에 업데이트 합 니 다.vue 는 데이터 의 get 과 set 함 수 를 설정 하여 이 루어 집 니 다.이런 방식 은 성능 적 으로 angular 보다 좋 습 니 다.
다음 코드 는 데이터 get 과 set 방법 을 간단하게 정의 하 는 예 입 니 다.set 와 get 방법 은 각각 데이터 가 바 뀌 고 방문 할 때 호출 되 어 데이터 의 변 화 를 감청 할 수 있 습 니 다.

//          
function Observer(data) {
 this.data = data;

 for(var key in data) {
  if(data.hasOwnProperty(key)) {
   var val = data[key];
   if(typeof data[key] === "object"){
    //          ,     
    new Observer(val);
   }else {
    this.convert(key, val);
   }
  }
 }
}
//   set   get  
Observer.prototype.convert = function(key, val) {
 Object.defineProperty(this.data, key, {
  enumerable: true,
  confingurable: true,
  get: function() {
   console.log(key + "    ");
   return val;
  },
  set: function(newVal) {
   console.log(key + "      " + newVal);
   val = newVal;
  }
 });
}
var app = new Observer({name: "xieshuai", age: 24, address: {city: "shenzheng"}});

app.data.name;  // name    
app.data.age = 18; // age      18

Object.defineProperty,ES6 에 추 가 된 방법 입 니 다.이 방법 을 통 해 getter 와 setter 함 수 를 사용자 정의 할 수 있 습 니 다.
위의 코드 는 간단 한 예 일 뿐 배열 의 상황 을 처리 하지 않 았 다.그러나 이것 은 vue 가 데이터 양 방향 연결 을 실현 하 는 핵심 이다.
본문 은 여기 서 마 치 겠 습 니 다.글 에 잘못된 점 이 있 으 면 지적 해 주 십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기