Vue.js Vue에서 배열(Array) 변경 감지하기

Vue의 반응성 시스템으로 데이터의 변경을 감지하고 화면에 다시 렌더링해줍니다. (ex. v-model 등)

하지만 배열의 변경을 Vue의 반응성 시스템이 감지할 수 있게 해주기 위해서는 배열의 특정 메서드를 사용해야 합니다

 

변경을 감지하는 배열(Array) 메서드

아래 메서드들은 Vue가 배열의 변경을 감지하고 반응형 시스템을 작동시킬 수 있게합니다. Vue에서 요소를 직접 수정하는 것이 아니라 아래 메서드를 이용하면 데이터를 업데이트 해줍니다.   

• push: 배열의 끝에 요소 추가
• pop: 배열의 마지막 요소 제거
• shift: 배열의 첫 번째 요소 제거
• unshift: 배열의 맨 앞에 요소 추가
• splice: 배열에서 요소 추가 또는 제거
• sort: 배열의 요소 정렬
• reverse: 배열의 요소 순서 뒤집기
• filter: 특정 조건을 만족하는 요소 필터링
• map: 배열의 각 요소를 변환하여 배열 생성 
• slice: 일부분을 추출하여 새 배열 생성
• concat: 배열 병합

array.push(item);
array.pop();
array.shift();
array.unshift(item);
array.splice(index, count, item1, item2, ...);
array.sort();
array.reverse();
const filteredArray = array.filter(item => !this.cart.includes(item));
const paymentOfItems = array.map(item => item.payment);
const partArray = array.slice(startIndex, endIndex);
const mergedArray = array.concat(extraArray);

---

$set 메서드를 통한 배열(Array) 변경

Vue는 일부 변경 메서드(예: push, pop, shift, unshift, splice)를 감지할 수 있지만, 인덱스로 직접 접근하여 값을 수정하는 경우에는 Vue가 변경을 감지하지 못할 수 있기 때문에 Vue의 `$set 메서드`를 사용하여 변경된 값을 알려줘야 합니다.

const array = ['apple', 'banana', 'orange'];

// array[1] = 'kiwi';        // Vue가 변경 감지 못함 
this.$set(array, 1, 'kiwi');  // Vue가 변경 감지하여 업데이트함

console.log(array);          // ['apple', 'kiwi', 'orange']

 

위 예제 처럼 Vue 인스턴스 내에서 `$set` 메서드를 호출할 수도 있지만, 

아래 방법1 처럼 Vue 객체를 직접 참조하여 `$set` 메서드를 호출할 수도 있습니다. (전역)

// 전역 사용 방법 
Vue.set(object, key, value);

// 컴포넌트 내부, Vue 인스턴스를 통한 방법
this.$set(object, key, value);