SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

Vue.js 배열변경감지 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

Vue.js 배열변경감지 정보

기타 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'
})

추천0

댓글 전체

전체 1,214
퍼블리셔팁 내용 검색

회원로그인

진행중 포인트경매

  1. 참여3 회 시작20.11.23 11:40 종료20.11.28 11:40
  2. 참여9 회 시작20.11.22 19:25 종료20.11.29 13:25

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT