Vue.js로 인해 발생하는 getter 및 setter에 대한 생각에 대해 이야기해 보겠습니다.

원인

Vue 인스턴스 아래 데이터 개체의 속성을 인쇄했을 때 흥미로운 점을 발견했습니다.

각 속성에는 두 가지가 있습니다. 나는 이것이 불필요하다고 생각하여 Vue 양방향 바인딩의 구현 원리를 확인하기 위해 Angular.js 양방향 바인딩의 구현 원리와 완전히 다르다는 것을 발견했습니다. 데이터 더티 감지를 사용합니다. 모델이 변경되면 모든 뷰가 관련 데이터에 바인딩되어 있는지 감지한 다음 뷰를 변경합니다. Vue에서 사용하는 게시-구독 모델은 지점 간 데이터 바인딩입니다.

Vue의 데이터 바인딩에는 컴파일=>링크의 두 단계만 있습니다.

Vue가 모델에 대한 사용자 수정을 어떻게 모니터링하는지 생각해 본 후에는 Vue 데이터의 모든 속성이 내가 이해한 속성을 설정하고 가져오는 것을 발견했습니다.

평소에는 다음과 같이 객체를 생성하고 해당 속성을 수정합니다.

var obj = {
 val:99
}
obj.val = 100;
console.log(obj.val)//100

문제는 없지만, 내가 이 개체의 속성을 수정했을 때 당신은 모니터링하고 작업을 수행하라는 요청을 받았습니다. 어떻게 하시겠습니까?

관련 생각

이를 위해서는 getter와 setter를 사용해야 합니다.

코더 개체에 이름 속성을 추가하고 이름 속성을 업데이트할 때마다 다음과 같이 작업을 완료해야 한다고 가정해 보겠습니다.

var Coder = function() {
 var that = this;
 return {
  get name(){
   if(that.name){
    return that.name
   }
   return '你还没有取名'
  },
  set name(val){
   console.log('你把名字修成了'+val)
   that.name = val
  }
 }
}
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

출력:

이 개체의 인쇄된 효과가 맨 위에 있는 Vue의 데이터 개체와 동일하다는 것을 알 수 있습니다. 둘 다 가져옵니다. 그리고 속성을 설정합니다.

위의 코드를 단계별로 분석해 보면 매우 흥미롭습니다.

먼저 객체 리터럴을 생성합니다:

var Coder = function() {...}

그런 다음 이것을 캐시합니다:

var that = this;

다음이 가장 중요합니다. 객체를 반환합니다.

{
 
　　get name(){...},
 
　　set name(val){...}
 
}

이름에서 알 수 있듯이 get은 값 획득을 위한 것이고 set은 할당을 위한 것입니다. 일반적인 상황에서는 값을 얻고 할당하기 위해 obj.prop을 사용하는데, 여기에는 객체의 값이 변경되었음을 어떻게 알 수 있습니까? 이제 세트가 나타날 차례입니다.

get과 set은 이렇게만 이해할 수 있습니다. 둘은 완전히 다른 것입니다.

다음으로, isMe라는 코더의 인스턴스를 생성합니다. isMe에는 이름 속성이 없습니다. isMe.name을 호출할 때 get name(){...}을 입력합니다. isMe에 이름 속성이 있는지 확인합니다. 대답이 '아니요'이면 이름 속성을 추가하고 여기에 값을 할당합니다. 이름 속성이 있으면 이름 속성을 반환합니다.

이것을 보고 get을 사용하는 방법을 알아야 합니다. 네, get은 값을 받는 함수라고 생각하면 됩니다.

인스턴스에 값을 할당할 때 더 중요한 것은 set 속성이라고 생각합니다.

isMe.name="周神"

이때. , set name( val){...}을 입력합니다. 형식 매개변수 val은 name 속성에 할당한 값입니다. 이 함수에서는 양방향 바인딩과 같은 많은 작업을 수행할 수 있습니다. 이 값의 모든 변경은 집합을 거쳐야 하기 때문에 다른 방법으로 변경할 수 없으며 이는 범용 수신기와 동일합니다.

이 기능을 구현하는 또 다른 방법이 있습니다.

ES5의 객체 프로토타입에는 get 및 set을 객체에 바인딩하는 데 특별히 사용되는 __defineGetter__ 및 __defineSetter__라는 두 가지 새로운 속성이 있습니다.

이렇게 쓰면 됩니다:

var Coder = function() {
}
Coder.prototype.__defineGetter__('name', function() {
 if (this.name) {
  return this.name
 }else{
  return '你还没有取名'
 }
})
Coder.prototype.__defineSetter__('name', function(val) {
 this.name = val
})
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

효과는 동일하므로 다음 방법을 사용하는 것이 좋습니다. 프로토타입에 작성되어 상속 및 재사용이 가능합니다.

요약

이 글의 내용이 모두의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 소통하라는 메시지.

Vue.js로 인한 getter 및 setter에 대한 더 많은 생각을 보려면 PHP 중국어 웹사이트의 관련 기사를 주목하세요!