vue.js 에서$set 와 배열 업데이트 방법

JavaScript 의 제한 으로 인해 Vue 는 다음 과 같은 변 경 된 배열 을 감지 할 수 없습니다.
색인 을 이용 하여 배열 의 한 항목 을 직접 설정 할 때,예 를 들 어 vm.items[indexOfItem]=newValue
배열 의 길 이 를 수정 할 때,예 를 들 어 vm.items.length=new Length 는 배열 을 업데이트 하지 않 습 니 다.
물론 vue 에서 해결 방법 을 주 었 습 니 다.Vue.set,vm.$set(Vue.set 의 변종 쓰기)또는 splice,caoncat 등 을 사용 하여 배열 을 수정 하 는 동시에 트리거 상태 업데이트 도 합 니 다.
ex:

따라서 인 스 턴 스 생 성 후 새로운 속성 을 인 스 턴 스 에 추가 하면 업데이트 가 발생 하지 않 습 니 다.
ps:현재 두 개의 배열 이 있 습 니 다.각각 arr 1,arr 2 입 니 다.arr 1 이하 의 할당 값 이 배열 을 바 꾸 면 arr 2 는$set 로 배열 을 바 꿉 니 다.결 과 는 어떻게 됩 니까?

data:{
 arr1 = ['a','b','c'];
 arr2 = [‘foo','bar','baz'];  
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');
처음에 우리 가 말 한 바 와 같이 아래 표 색인 에 따라 배열 을 바 꾸 면 상태 업 데 이 트 를 실행 할 수 없습니다.첫 번 째 배열 의 두 번 째 변 화 는 페이지 에서 업데이트 되 지 않 고 두 번 째 배열 의 변경 만 페이지 에서 업 데 이 트 됩 니 다.그러나 결 과 는:

arr1 = ['a', 'alpha', 'b', 'c'];
arr2 = [‘foo', 'alpha', 'bar','baz']; 
두 배열 의 값 이 모두 업데이트 되 었 습 니 다.즉,arr 2 가$set()방법 으로 업데이트 되면 페이지 가 모두 업 데 이 트 됩 니 다.
이 vue.js 에서$set 와 배열 업데이트 방법 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기