Vue.js 배열변경감지

배열변경감지

#변이 메소드
Vue는 감시중인 배열의 변이 메소드를 래핑하여 뷰 갱신을 트리거합니다. 
래핑된 메소드는 다음과 같습니다.
push(), pop(), shift(), ushift(), splice(), sort(), reverse()
콘솔을 열고 이전 예제의 items배열로 변이 메소드를 호출하여 재생할 수 있습니다.
예: example1.items.push({message: 'Baz'})

#배열대체
이름에서 알 수 있듯 변이 메소드는 호출된 원본 배열을 변형합니다.
이와 비교하여 변형을 하지 않는 방법도 있습니다.

filter(), concat()와 slice()입니다.
이 방법을 사용하면 원본 배열을 변형하지 않고 항상 새 배열을 반환합니다. 
변형이 없는 방법으로 작업할 때 이전 배열을 새 배열로 바꿀 수 있습니다.
JS부분
example1.items = exmple1.items.filter(function(item){
    return item.message.match(/Foo/)
})

이렇게 하면 Vue가 기존 DOM을 버리고 전체 목록을 다시 렌더링한다고 생각할 수 있습니다.
다행히도, 그렇지는 않습니다. Vue는 DOM 요소 재사용을 극대화하기 위해 
몇가지 똑똑한 구현을 하므로 배열을 겹치는 객체가 포함된 다른 배열로 대체하여 효율적입니다.

#주의사항
Javascript의 제한으로 인해 Vue는 배열에 대해 다음과 같은 변경 사항을 감지할 수 없습니다.

1. 인덱스로 배열에 있는 항목을 직접 설정하는 경우
예:
vm.items[indexOfItem] = newValue
2.배열 길이를 수정하는 경우
예: vm.items.length = newLength

//Vue.set
Vue.set(example1.items, indexOfItem, newValue)

//Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

주의사항 중 2번을 극복하기 위해 splice를 사용해야 합니다.

example1.items.splice(newLength)

객체 변경 감지에 관한 주의사항

모던 javascript의 한계로 Vue는 속성 추가 및 삭제를 감지하지 못합니다.
예를 들어, 
var vm = new Vue({
    data : {
        a: 1
    }
})
//vm.a는 반응형입니다.

vm.b = 2
//vm.b는 반응형이 아닙니다.

Vue는 이미 만들어진 인스턴스에 새로운 루트레벨의 반응형 속성을 동적으로 추가하는 것을
허용하지 않습니다. 
그러나 Vue.set(object, key, value)메소드를 사용하여 중첩된 객체에 
반응형 속성을 추가할 수 있습니다.

var vm = new Vue({
    data:{
        userProfile:{
            name: 'Anika'
        }
    }
})

다음과 같이 중첩된 userProfile 객체에 새로운 속성 age를 추가합니다.

Vue.set(vm.userProfile, 'age', 27)

인스턴스 메소드인 vm.$set를 사용할 수도 있습니다. 
이는 전역 Vue.set의 별칭입니다.

vm.$set(this.userProfile, 'age', 27)
때로는 Object.assign()이나 _.extend()를 사용해 기존의 객체에
새 속성을 할당 할 수 있습니다.
이 경우 두 객체의 속성을 사용해 새 객체를 만들어야 합니다.

Object.assign(this.userProfile, {
    age: 27, 
    favoriteColor: 'Vue Green'
})
새로운 반응형 속성을 다음과 같이 추가합니다.

this.userProfile = Object.assign({}, this.userProfile, {
    age: 27, 
    favoriteColor: 'Vue Green'
})