vue: 내부 컴포넌트에 커스텀 속성을 추가하여 "_ob__" 및 getter/setter를 추가하지 않도록 합니다.

vue: 내부 컴포넌트에 커스텀 속성을 추가하여 "_ob__" 및 getter/setter를 추가하지 않도록 합니다.

속성을 추가하다this컴포넌트 내에서는 이 속성을 컴포넌트 메서드 간에 공유하지만 템플릿 내에서는 사용하지 않는 것이 좋습니다.

그리고 나는 부동산에 자산을 추가할 유일한 방법을 찾았다.this안에 넣는 거야data()기능, 예를 들어

data() {
  return {
    group: {
      children: []
    }
  }
}

그리고 Vue가 만들 것이다.group가지다__ob__& getters & setters (모든 속성

제가 그걸 걱정해야 하나요?이런 식으로 계속 속성을 추가하면 성능 문제가 발생합니까?그렇다면 구성 요소의 메서드 간에 변수를 공유하려면 어떻게 해야 합니까?

Vue는 컴포넌트 인스턴스를 생성할 때 사용자의 각 속성을 살펴봅니다.data속성이 객체/배열인 경우 옵서버를 연결할 뿐만 아니라 getter/setter 쌍을 만듭니다.이는 구성 요소가 상태 돌연변이에 반응하도록 하기 위한 것입니다.초기비용과 장부비용은 다소 증가하지만, 어디까지나 무시할 수 있는 금액이기 때문에 크게 걱정하지 않습니다.

Vue의 창시자인 Evan You는 "Demystifying Frontend Framework Performance"라는 제목의 훌륭한 강연에서 프런트엔드 프레임워크의 다양한 성능 측면을 비교하고 Vue의 구현이 다른 프레임워크와 비교하여 어떻게 진행되는지 설명합니다.그는 반응성을 달성하기 위해 해야 했던 트레이드오프에 대해 간략히 설명하고 Vue의 작동 방식 때문에 대규모 앱을 만들지 않는 한 성능 저하를 걱정할 필요가 없다는 결론을 내렸습니다.

이러한 대규모 앱을 만들고 있을 때 성능 문제가 발생하더라도 이러한 애플리케이션에 반응하지 않는 상태를 이동할 수 있습니다.created훅, 그리고 Vue는 그것을 추적하지 않을 것이다.

created() {
 this.group = {
   children: []
 }
}

수정되지 않는 객체의 경우 객체를 사용할 수도 있습니다.freeze()와 Vue도 그것들을 추적하지 않습니다.

const group = {children: []}
Object.freeze(group)

// Then in your data
data() {
  return {
    group,
  }
}

걱정 안 하셔도 돼요. 그 이유는childrenobject는 상위 객체의 참조입니다.group새로운 오브젝트가 아닌__ob__상태 변화를 검출하고 상속 객체와 관련된 새로운 값을 설정 및 취득하기 위해 워처가 사용하는 옵서버 패턴입니다.그러면 자바스크립트 메모리에서 모든 것이2 객체가 아닌1개의 객체에 저장되므로 JavaScript를 참조할 것을 권장합니다. Will Sentance용 하드 부품 시리즈 및 고급 Vue.js 기능은 처음부터 Evan You용

언급URL : https://stackoverflow.com/questions/53571205/vue-add-custom-property-to-this-inside-component-and-prevent-being-added