Vue 감지 객체 및 배열의 ​​변화 분석

이 글은 객체와 배열의 변화를 감지하기 위한 Vue 관련 지식 포인트와 예제 코드를 공유합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

JavaScript에서 객체와 배열은 동일한 메모리 공간을 가리키는 참조 유형입니다. prop이 객체나 배열인 경우 하위 구성 요소 내에서 이를 변경하면 상위 구성 요소의 상태에 영향을 미칩니다. 하위 구성 요소에서 객체나 배열을 직접 수정할 수 있지만 데이터가 변경되면 변경 사항이 발생하지 않습니다.

객체 변경 감지

1. 객체 속성의 추가 또는 삭제를 감지할 수 없습니다

var vm = new Vue({
 data:{
   data111:{
     a = 1
   }
 }
})

data111.a = 2;//이로 인해 변경이 발생할 수 있습니다

data111.b = 2; vm.b = 2는 변경 사항을 감지할 수 없습니다.

배열 변경 사항을 감지하려면

Vue.set(object, key, value)

와 같은

$set(data111, b, 2);

또는

$set(key,value)

과 같은

vm.$set(‘b', 2)；

를 사용해야 합니다.

감지됨 다음 두 가지 경우:

1. arr[0]=12와 같이 인덱스로 요소를 직접 설정합니다.

2 vm.arr.length

Vue.set( object, key, value )

Usage와 같이 배열 길이를 직접 수정합니다. :

this.$set(this.arr,0,12)

여기까지입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

Vue 데이터 제어 뷰 소스 코드 분석 정보

라우팅 매개변수를 동적으로 설정하는 Vue 소개

위 내용은 Vue 감지 객체 및 배열의 ​​변화 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!