Vue: v-for에서 더 많은 컬렉션 데이터 유형 지원

https://github.com/vuejs/vue/issues/1319 의 사본

@wenLiangcan , 다음과 같이 사용할 수 있습니다.

<ul>
    <li v-for="[key, val] of get(map)">{{key}} - {{val}}</li>
</ul>

여기서 get() 는 함수입니다.

ㅋ! 비슷한 문제가 항상 열려 있고 사람들은 구현을 정당화할 수 없다고 주장합니다. 사람들은 그것을 사용하기를 원합니다. 이것이 하나의 정당화입니다. 동일한 것을 요구하는 수많은 문제를 나열할 수도 있습니다. xD. 나는 또한 유스 케이스를 정말 잘 정당화하고 맵 순서와 관련하여 es6 사양을 참조하는 것을 찾았습니다 -> 여전히 닫혀 있습니다.

기능을 사용하고자 하는 사람들이 그 자체로 그러한 기능의 필요성을 정당화할 수 있는 주장일 뿐만 아니라 그러한 기능을 추가하는 비용과 이점(어떤 문제가 해결되고 있는지)을 저울질할 필요가 있습니다

네, 하지만 여전히 사람들이 문제를 종결하기 위해 사용하는 주장은 모든 사용 사례에 대해 여전히 유효하지 않거나 적어도 유효하지 않습니다. 예를 들어 위에서 언급한 것처럼 자신의 사용 사례를 매우 잘 정당화한 elipen의 예

특정 문제에 대해 논의하고 싶다면 링크를 걸어주세요.

또한 이 기능 문제가 열려 있습니다. 동일한 요청에 대해 두 개 이상의 문제를 열어두는 것은 의미가 없습니다.

루프에서 반복자를 반복할 수 있는 것이 중요합니다. 그것은 명백하게 보인다. 언어의 기본 기능입니다.

지원하는 이유는 다음과 같습니다.

1) 반복자, 맵 및 세트는 모두 유효한 ES6입니다. 그들을 지원하기를 거부한다는 것은 ES5로 자신을 제한하는 것을 의미하며, 이는 시간이 지남에 따라 점점 덜 정당화되는 결정입니다.
2) Maps 및 Sets에 내부 데이터가 저장된 애플리케이션을 구축 중입니다. UI에서 사용할 수 있도록 하는 대신 이제 두 데이터 간에 데이터를 수동으로 동기화하거나 상용구를 작성하고 템플릿으로 가져와 데이터가 필요할 때마다 변환을 수행해야 합니다. 이것이 바로 Vue가 피하려는 것입니다.

#1319가 폐쇄되었으므로 여기에서 현재 결정을 반복할 가치가 있습니다. 간단히 말해서 이 기능은 (관찰 메커니즘 수준에서) 구현하기가 쉽지 않으므로 사용 사례를 정당화하는 것이 아니라 작업량과 절충안이 중요합니다.

이 기능도 정말 감사하겠습니다. 반면에 ES6 데이터 유형을 관찰하는 것이 매우 해킹되거나 예를 들어 성능이나 기타 품질이 저하되는 경우 현재 Vue에서 Maps 및 Sets를 사용하지 않는 사람들은 이 변경 사항을 이해하지 못할 수 있습니다.

계산된 함수 내에서 Array.from()을 사용하는 것이 지금은 가장 친한 친구가 되어야 한다고 생각합니다. :실망한:

이에 대한 해결책이 있습니까?

작은 업데이트, 이것은 Vue가 "레거시" 브라우저를 삭제하기로 결정하고 반응성을 위해 set / get 대신 Proxy 사용하여 Evergreen 브라우저로 이동하는 경우 제공됩니다.

@alexsandro-xpt, Array.from(yourDataSet) 를 반환하는 계산 함수를 사용하세요.

@nickmessing Map으로 시도
계산된 배열 길이 값은 항상 0입니다.

Array.from 는 반응성 부족으로 인해 원하는 솔루션이 아닐 수 있습니다( yourDataSet 변경 사항은 Vue에 전파되지 않음).

앞에서 언급했듯이 세트와 맵은 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의 직렬화된 버전으로 끝났습니다(예: 수정된 버전의 세트/맵을 localstorage에 저장하여 어쨌든 직렬화하고 싶을 것입니다). 따라서 인위적인 카운터/해킹이 포함되지 않았습니다.

나는 개인적으로 이것이 문제에 대한 공정한 해결책이라고 생각하지만, 확실히 공식 문서를 받을 가치가 있습니다. 그렇지 않으면 이것을 Vue 내부를 다루는 비 해킹 방식으로 정당화하는 것이 불가능합니다.

@alexsandro-xpt, 죄송합니다. 제가 틀렸습니다. @inca가 말했듯이 계산은 해키될 것입니다. 또 다른 해키 솔루션은 $forceUpdate 메서드를 사용하는 것입니다. 여기에 바이올린 의 예가 있습니다.

@nickmessing 과 @inca 에게 감사드립니다. 이것은 제 new Map() 잘 작동합니다 !!

바로 지금 "Map"에 대해 "v-for"를 수행하면 v-for는 빈 배열을 수신한 것처럼 작동합니다.

Maps 및 Sets 지원 여부/방법에 대한 확장된 토론의 결과에 관계없이 Vue가 단순히 "Maps 및 Sets는 아직 지원되지 않습니다 -- https://github 참조"라고 경고하면 많은 사람들이 디버깅 시간을 많이 절약할 수 있습니다.

예, 이 기능에 대한 Google 검색으로 이 티켓이 표시되었습니다(Vue.set과 몇 가지 성가신 혼동 후).

👍 이것은 v-for 문서에 있어야 합니다!

정말로, v-for 문서에 있어야 합니다!

/cc @chrisvfritz v-for (API와 목록 렌더링 섹션 모두)에 대한 문서에 이러한 유형에 대한 지원에 대한 메모를 추가하려고 합니다. 2.5에서도 살펴보겠습니다.

@ yyx990803 콘솔 경고가 이에 대해 더 나은지 궁금합니다. 사람들에게 즉시 무엇이 잘못되었는지 알려주고 솔루션을 검색할 필요가 없기 때문입니다.

우리는 또한 문서에서 이미 지원 _do_ 하는 유형, Map 및 Set 되지 않음에 대해 매우 명시적입니다. 모든 iterables가 v-for 와 함께 작동하기를 _희망_할 수 있는 이유에 대한 주장을 확실히 알 수 있지만 현재 독자들에게 그들이 그렇게 할 것이라고 기대할 이유를 주지는 않는다고 생각합니다.

Set 대한 지원을 추가하는 것에 반대하는 주장은 잘 모르겠습니다.

Set 자체는 깔끔하게 폴리필할 수 있고, 내가 뭔가를 놓치고 있지 않는 한 배열에 반응성을 추가하는 Vue의 접근 방식은 세트로 매우 쉽게 확장될 수 있을 것 같습니다. .add() , .clear() 및 .delete() 만 래핑하면 됩니다.

최선의 추측(제가 틀렸다면 정정/죄송합니다): 가장 까다로운 부분은 iterable을 허용하는 Set 생성자를 래핑하는 것입니다. 일반적인 형태에서는 참조 가능한 상태가 없는 함수(예: next )이기 때문에 반복 가능을 관찰 가능하게 만드는 방법을 모르겠습니다(제너레이터 기반 반복기를 예로 생각해 보세요).

생성자를 래핑해야 하는 이유는 무엇입니까? 기존 Set을 Vue에 전달하지 않을까요?

사양 에 따르면 Set 생성자는 전체 반복자를 통해 즉시 실행되어 반복자가 반환한 고유 항목의 얕은 복사본을 효과적으로 유지합니다. Set 인스턴스가 있으면 iterator에서 생성되었는지 여부는 중요하지 않습니다.

이 점에서, Set 로부터 생성은 반복자 (통해 반복기로부터 생성 배열 다르지 없어야 Array.from() ), 뷰 이미 지지체.

변경할 수 없는 Maps/sets/ 데이터 구조를 사용할 수 있으며 이에 대한 반응성을 허용하지만 단순히 전체 청크 참조가 변경되기 때문입니다. 렌더링 함수 또는 계산된 생성된 배열을 통해 렌더링할 수 있습니다(배열 생성을 건너뛰므로 성능이 빠를수록 좋습니다.). 그러나 가변 데이터 구조는 Vue에 특정 변경 사항을 수동으로 알리는 방법을 찾지 않는 한 그렇지 않습니다. 이는 단순히 자체 솔루션을 만드는 것입니다.

그건 좋지 않아. 당신은 그것을 할 수 없습니다

@wenLiangcan

var map = new Map()
  map.set('key1','Test1')
  map.set('key2','Test2')

        <div class="file-size">{{value}}</div>
 </div>

아니요, 페이지에 표시되지 않습니다.

이것에 대한 지원을 열망하십시오 :)

저도 요

지원을 추가할 향후 계획이 있습니까? Vue가 Map과 Set을 지원하지 못하는 기술적인 이유가 있나요?

일반 개체에 대한 Vue.set 메서드의 현재 문제는 속성이 개체에 추가될 때 너무 많은 구독자를 트리거한다는 것입니다. 실제로 모든 속성의 모든 구독자는 속성이 하나만 추가될 때 트리거됩니다.

컬렉션과 같은 맵에 100분의 1 키가 포함되어 있으면 보기의 성능이 크게 저하됩니다. 예를 들어 내 프로젝트에서 Vue.set 작업을 사용하여 하나의 요소가 맵에 추가되면 수천 명의 구독자가 트리거됩니다.

Vue.set(state.items, itemId, item); // where items is a plain object.

Vue.js 코드를 자세히 살펴보면 문제가 어디에서 왔는지 알 수 있습니다. 트리거되는 종속성은 개체의 종속성입니다. 즉, 개체에 각 키에 대해 하나의 속성이 있는 경우 하나의 키만 추가하면 모든 키의 모든 종속성이 트리거됩니다.

따라서 지도를 모방하기 위해 일반 객체를 사용하는 것은 올바른 솔루션으로 보이지 않으므로 vue에서 지도를 지원하는 것은 대규모 항목 컬렉션에 대해 환영받는 것 이상입니다.

향후 계획 및 기본 Map/Set 지원에 대한 소식이 있습니까?

이 기사에서는 2.6에서 예정된 지원에 대해 자세히 설명합니다. 하지만 내가 볼 수 있는 공식 로드맵에는 이에 대한 내용이 없습니다.

https://medium.com/@alberto.park/the -status-of-javascript-libraries-frameworks-2018-beyond-3a5a7cae7513

"현재 최신 코어는 2.5.x입니다. 다음 부 릴리스(v2.6)는 기본 ESM 가져오기, 향상된 비동기 오류 처리, 'v-for' 지시문에 대한 반복기 등을 지원할 것입니다."

어디서 그 정보를 얻었는지 확실하지 않습니까?

Set 데이터 개체에 대한 도대체 Vue의 동작을 디버깅하는 동안 이 문제를 발견했습니다. :생각:

이에 대한 로드맵에 대해 궁금했던 저와 같은 사람들을 위해 Evan You는 이 비디오 에서 Map and Set 지원이 2.6에 도착할 "가능성"이 있지만 그것이 5월이었으므로 제가 아는 전부라고 말했습니다.

@yyx990803 특히 가까운 장래에 지원을 추가할 계획이라면 추적기의 이 문제가 종료된 것으로 표시되어 유감입니다. 이 기능의 진행 상황을 어디에서 확인할 수 있습니까? 어딘가에 다른 문제가 있습니까?

논쟁을 위해 궁금하고 어쩌면 내가 잘못하고 있을지도 모르지만 Mutation Methods를 사용하여 배열 돌연변이를 추적할 수 있기 때문에 객체의 배열을 추적하고 논리적으로 완전할 수 없습니까? Map에서 구현된 동일한 기능을 모두 얻지는 못하지만 특히 _ 또는 lodash와 같은 것을 사용하는 경우 원하는 기능을 매우 쉽게 해결할 수 있습니다.

슬프지만 팀이 이것을 추가할 때까지 대체 데이터 구조를 사용해야 할 수도 있습니다.

데이터 구조에 Map을 사용하기로 하고 자사 지원이 부족하여 이를 사용하지 않기로 결정했다는 점에서 차임하고 싶습니다.

이것은 vue.js v3.0용으로 계획되어 있습니다.
비교: https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf

이것은 현재 Vue3에서 지원됩니까(즉, reactive Map 및 Set )?