Vue는 맵 및 세트 데이터 유형에 대한 반응성을 지원합니까?

Vue는 맵 및 세트 데이터 유형에 대한 반응성을 지원합니까?

Vue.js 문서에서는 플레인 Javascript 객체에 대한 스마트 자동 변경 추적에 대해 설명합니다.

플레인 JavaScript 개체를 데이터 옵션으로 Vue 인스턴스에 전달하면 Vue.js는 모든 속성을 검토하고 Object.defineProperty를 사용하여 getter/setter로 변환합니다.

Javascript가Map그리고.Set데이터 타입은 빌트형에서 사용할 수 있도록 설계되어 있습니다.get/set메서드, Vue가 콜(및 변경)을 추적하도록 하려면 어떻게 해야 합니까?Map및Sets?

Vue.js는 다음 위치에서 반응성을 지원하지 않습니다.Map그리고.Set데이터 유형(아직?)

기능 티켓에 대해 몇 가지 설명을 하고 이 문제를 해결합니다(사용자 "inca"에 의한).

Vue에서 집합 및 지도를 관찰할 수 없습니다.이러한 기능을 사용하려면 , 다음의 어느쪽인가에 있습니다.v-for또는 계산된 속성, 메서드, 워처, 템플릿 식 등에서 이 구조의 직렬화 가능 복제본을 생성하여 Vue에 공개해야 합니다.다음은 간단한 카운터를 사용하여 Vue에게 다음과 같은 정보를 제공하는 간단한 예입니다.Set갱신되었습니다.

data() {
  mySetChangeTracker: 1,
  mySet: new Set(),
},

computed: {
  mySetAsList() { 
    // By using `mySetChangeTracker` we tell Vue that this property depends on it,
    // so it gets re-evaluated whenever `mySetChangeTracker` changes
    return this.mySetChangeTracker && Array.from(this.mySet);
  },
},

methods: {
  add(item) {
    this.mySet.add(item);
    // Trigger Vue updates
    this.mySetChangeTracker += 1;
  }
}

이것은 관찰할 수 없는 데이터를 반응시키기 위한 일종의 해킹이지만 100% 효과적인 방법을 보여줍니다.그러나 실제 상황에서는 Sets/Maps의 시리얼화 버전(예를 들어 수정된 버전의 세트/맵을 로컬 스토리지에 저장하여 시리얼화하려는 경우)을 갖게 되었기 때문에 인위적인 카운터/해크는 필요하지 않습니다.

Vue 3

네, 포함되었습니다.

Vue 3 문서에서는 이러한 내용을 Reactivity in deepth 및 Basic Reactivity API에서 다룹니다.

"reactive"와 "reference"의 4종류가 추가로 있습니다.Vue 3 및 ES6 코딩을 통해 6개월 이상 사용 패턴을 찾고 있습니다.중요한 질문은 이 시스템을 사용할지 여부입니다.Reactive또는Reference.

언급

Reference쉽게 갈 수 있는 길입니다.이것은 에 의해 반환되는 것이다.computed,예를들면.JavaScript 값의 반응형 버전을 만듭니다.Map또는Set.

여기 있다.사용하는 경우Reference자바스크립트에서.value값을 참조 해제하려면 를 추가해야 합니다.템플릿 HTML에서 사용하는 경우 이 추가는 필요하지 않습니다.이렇게 하면ReferenceUI에 대한 대응에는 최적이지만 내부 프로그래밍에는 적합하지 않습니다.

현재 추가 중Ref를 제공하는 값 또는 함수의 이름에 대한 포스트픽스Reference그게 나야.둘 다 사용하면 헷갈리기 쉽다.Reference그리고.Reactive(TypeScript가 도움이 됩니다).

리액티브

Reactive지도와 같은 용도로 제작되었습니다.다음과 같이 초기화할 수 있습니다.

const rve = reactive( new Map() )

이러한 액세스에 필요한 것은 필요 없습니다..value하지만, 그런 것 같다.Reactive에는 열거 메서드가 없습니다(예:.entries()지도처럼 사용할 수 있습니다.따라서 객체의 키를 알고 있는 활용 사례를 대상으로 하고 있는 것 같습니다.하지만 이것은 바뀔 수 있다.

좋겠다ReactiveES의 1:1 대체품으로 사용할 수 있는 방향으로 도입되었습니다.Map이렇게 하면 더 쉽게 할 수 있습니다.Reactive위해서Map및Reference남은 시간 동안.

저도 이름이 바뀌어서 친해졌으면 좋겠어요. RMap괜찮을 것 같아 - 어쩌면 하나 만들지도 몰라 (에서 파생된 것)Reactive열거 메서드를 추가합니다).

요약

Vue 3의 강력한 대답은 "YES"입니다.

단, 개발자 가이던스는 보다 쉽게 할 수 있으며, 어떤 것이 선택 논리가 될 것인지를 명확하게 기술할 수 있습니다.Reference ★★★★★★★★★★★★★★★★★」Reactive다양한 블로그 투고를 읽을 필요 없이 런타임 장단점이 무엇인지에 대해 설명합니다.

---

: 현재 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」Ref을 꽤 , 1개의 만 나오게 됩니다..value의 범위 내에서computed.

내가 아는 한, Vue의 반응성은 임무를 추적합니다.세트에서 할당을 수행할 경우 다음과 같이 반응성을 추적해야 합니다.

methods: {
  add(item) {
    this.mySet = new Set(this.mySet.add(item));
  }
}

이를 통해 보다 명확한 코드를 얻을 수 있지만 성능이라는 명백한 문제가 있습니다.

니즈에 맞는 솔루션을 선택하기만 하면 됩니다.

언급URL : https://stackoverflow.com/questions/47269113/vuex-state-map-value-changes-dont-propagate