[Vue.js]Object.assign의 수조 복사에 소박하게 빠진 노트 [추기]

패턴을 다시 활성화할 수 있습니다.
'공수 그룹'에 대해 여러 개의 저장 값이 있는 그룹을 준비했습니다.
탭을 전환할 때 복사할 그룹을 변경합니다.
test.vue

let a = [1, 2, 3, 4, 5];
let b = [6, 7, 8];
let c = [9, 10];

タブ切り替え時、コピーする配列（target部分)を変える。
Object.assign(this.array, target);

뷰에 이 배열 요소 수를 표시하는 설치를 진행했을 때
정확한 요소수를 표시하지 못해 난감하다.
결과 표시

<p>{{array.length}}</P>
　　　　↓　↓　↓
一番要素数が多いaの配列を格納すると、
それ以降はどのタブに切り替えても、aの要素数から変更されない

원인

참고 자료도 있어요.
Object.assign () 방법으로 복사
현재 어떤 요소에 덮여 있는 형식이 되다.
그건 요소수가 바뀌지 않았기 때문이에요.
test.vue

let a = [1, 2, 3, 4, 5];
let b = [6, 7, 8];
let c = [9, 10];

①aをarryにコピーする
Object.assign(this.array, a);
  → this.arry[ 1, 2, 3, 4, 5];

②次はbをコピーする
Object.assign(this.array, b);
  → this.arry[ 6, 7, 8, 4, 5]; //上書きされているため、要素数は変わらない

대책

그룹에 저장하기 전에 초기화 처리를 합니다.
이렇게 하면 정확한 요소수를 표시할 수 있다.
test.vue

// 配列初期化
this.array.splice(-this.arry.length);
//コピー
Object.assign(this.array, target);

마지막

실제로 메모리 그룹을 하위 그룹에 전달하는 등 처리가 복잡해졌다
이렇게 간단한 일을 알아차리기에는 늦었다
공부밖에 없어!!

보충하여 기록하다

댓글에서 다음 방법을 알려드리면요.
초기화 처리 필요 없어, 그룹 복사 완료!!
이 코드가 더 원활합니다.
slice()의 참고 자료
보충하여 기록하다

let a = [1, 2, 3, 4, 5];
let b = [6, 7, 8];
let c = [9, 10];

①配列aのコピーをする
this.array = a.slice()；
→this.array[1, 2, 3, 4, 5]

②①の後、this.arrayに配列bを再度格納する
this.array = b.slice()；
→this.array[6, 7, 8] 　
//上書きではなく、コピー元の配列全体を切り出して新しく配列を生成してくれた！