Vue 구성 요소에서 사용자 정의 Getter 정의

Vue 구성 요소에서 사용자 정의 Getter 정의

내 질문은 Vue와 좀 더 구체적으로 반응성 및 반응성 게터/세터: https://vuejs.org/v2/guide/reactivity.html

Vue 구성 요소에서 나만의 게이터를 정의할 수 있으며 Vue가 자체 반응 게터를 추가하면 어떻게 될까?

Vue는 모든 속성을 거치고 Object.defineProperty를 사용하여 getter/setter로 변환한다.

위의 문장이 의미하는 것은 당신의 각 재산에 대해 반복하는 것이다.data반응하게 만드는 옵션.

예를 들어 다음을 고려하십시오.data옵션:

data:{
  foo: 'hello world',
  bar: 3
}

vue는 그 이상이다.data다음과 같은 객체(추상적 설명에 불과하다):

let key = Object.keys(data)

for (let i = 0; i < keys.length; i++) {
  let val = data[keys[i]];
  Object.defineProperty(data, keys[i], {
    get(){
      // add this property as a dependency when accessed
      return val;
    },
    set(newVal){
      //notify for a change
      val = newVal;
    }
  })
}

동일한 vue 소스 코드를 체크아웃하면 속성에 미리 정의된 getter 또는 setter가 있는지 여부를 확인할 수 있다.

그런 다음 다음과 같이 속성 getter를 재정의한다.

Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter() {
    const value = getter ? getter.call(obj) : val;
    if (Dep.target) {
      dep.depend();
      if (childOb) {
        childOb.dep.depend();
        if (Array.isArray(value)) {
          dependArray(value);
        }
      }
    }
    return value;
  },
  set(newVal) {
    //...
  }
});

이 선이 보이면 const value = getter ? getter.call(obj) : val;게터를 정의한 경우 게터가 사용되고 있으며 그 값이 반환된다는 것을 알게 될 것이다.

Vue는 단지 그것과 관련된 몇몇 의존성 관련 방법들을 호출함으로써 그들을 반응하게 만들기 위해 더 많은 일을 하고 있을 뿐이다.

참조URL: https://stackoverflow.com/questions/51059477/defining-user-defined-getters-in-a-vue-component