집 > 기사 > 웹 프론트엔드 > Vuejs 반응 원리에 대한 자세한 분석

Vuejs 반응 원리에 대한 자세한 분석

php中世界最好的语言원래의: 2018-04-14 11:00:391236검색

이번에는 Vuejs 응답성 원칙에 대한 자세한 분석을 가져오겠습니다. Vuejs 응답성 원칙을 사용할 때 주의사항은 무엇인가요?

응답 원칙

> vuejs의 Model(모델)과 View(뷰)는 동기화됩니다. 데이터가 수정되면 뷰가 자동으로 업데이트됩니다. 이는 실제로 Object.defineProperty 메서드에 따라 달라지므로 vuejs는 IE8 이하를 지원하지 않습니다. vuejs getter/setter 메소드를 하이재킹하여 데이터 변경 사항을 모니터링하고, getter를 통해 종속성을 수집하고, 데이터가 변경되고 setter가 실행될 때 업데이트하도록 뷰에 알립니다.

Object.defineProperty

> Object.defineProperty는 객체의 속성을 정의하거나 수정할 수 있습니다
> 현재 Object.defineProperty로 설명할 수 있는 속성은 데이터 속성과 접근자 속성의 두 가지 유형으로 나뉩니다. 데이터 속성 > 데이터 속성에는 값, 쓰기 가능, 열거 가능, 구성 가능

// obj: 对象
// prop: 对象中的属性
// descriptor: 对象中的属性的特性
Object.defineProperty(obj,prop,descriptor);

이라는 네 가지 유형의 설명자가 있습니다. 접근자 속성 > 접근자 속성에는 get, set, enumerable, configurable

var person = {
  name: 'json',
  age: 18
}
Object.defineProperty(person, 'name', {
  value: 'John',     // 属性的值，默认为undefined
  writable: false,    // 是否可以重写属性的值，设为false便是只读的
  enumerable: false,   // 是否可枚举（for in或Object.keys)，默认为false
  configurable: true   // 是否可以删除或者重新设定上述配置，默认为false
})
person.name = 'new name';
console.log(person.name); // 'John'
for(key in person) console.log(person[key]);  // 18
Object.defineProperty(person, 'name', {
  writable: true,    
  enumerable: true,   
  configurable: false   
})
person.name = 'new name';
console.log(person.name); // 'new name'
for(key in person) console.log(person[key]);  // 'new name',18

이라는 네 가지 설명자가 있습니다.

Vuejs가 데이터를 가로채는 방법

var person = { _age: 20 };
Object.defineProperty(person, 'age',{
  get: function(){
    return this._age;
  },
  set: function(age){
    this._age = age < 0 ? 0 : age;
  }
});
person.age = 5;   // _age == 5
person.age = -3;  // _age == 0
person._age = -3;  // _age == -3

잔여 문제 > 위 구현에서는 app._data_text를 통해서만 트리거를 설정할 수 있는데, app.text 트리거는 어떻게 설정할 수 있나요? > 이 객체에 accessor 속성을 추가하여 프록시를 구현할 수 있으며, app._data.text를 대체하기 위해 app.text를 사용할 수 있습니다. PHP 중국어 웹사이트에서 더 흥미로운 내용에 주목하세요!

Vuejs 반응 원리에 대한 자세한 분석

관련 기사