vue 데이터 양 방향 바 인 딩 원리 분석(get&set)
1926 단어 vuejs양 방향 바 인 딩
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
위의 코드 는 간단 한 예 일 뿐 배열 의 상황 을 처리 하지 않 았 다.그러나 이것 은 vue 가 데이터 양 방향 연결 을 실현 하 는 핵심 이다.
본문 은 여기 서 마 치 겠 습 니 다.글 에 잘못된 점 이 있 으 면 지적 해 주 십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue.js + Google Places: 여러 입력 필드 자동 완성경우에 따라 두 개 이상의 입력 필드에 장소 자동 완성 기능을 추가할 수 있습니다. 일반적인 예는 두 위치 사이의 이동 거리를 찾는 것입니다. 이 경우 사용자는 자동 완성 기능이 활성화된 두 개의 입력 필드를 갖게 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
