Vue.js 자주 하는 실수 모음

1. 배열 복사

레퍼런스 참조 없는 복사를 하려면 다음처럼 하면 됨!

const origin = [0, 1, 2, 3, 4, 5];

let copy1 = origin.slice();	// 방법1
let copy2 = JSON.parse(JSON.stringify(origin));	// 방법2

 

2. 반응형 속성 동적 추가

반응형 속성을 동적으로 추가할 때는 set을 사용해야 함 (참고)

/*
// 기존에 정의된 반응형 데이터
const items = [
   { name: 'jane', age: 18 }, 
   { name: 'jack', age: 27 }, 
   { name: 'han', age: 7 }
]
*/

// 아래 방법으로 데이터를 추가할 경우, 비반응형 데이터가 됨
items[0].major = 'math';
items[0]['major'] = 'math';

// 아래 방법으로 데이터를 추가해야 반응형 데이터가 됨
Vue.set(items[0], major, 'math');
this.$set(items[0], major, 'math');