문제 설명: Vue는 Object.defineProperty를 통해 데이터의 변경 사항을 감지하므로 이 감지 및 바인딩 작업이 생성자의 모든 속성에 대해 수행되었기 때문에 배열의 추가 작업을 모니터링할 수 없는 것은 이해할 수 있습니다.
그러나 공식 텍스트: JavaScript 제한으로 인해 Vue는 다음과 같은 변경된 배열을 감지할 수 없습니다:
색인을 사용하여 항목을 직접 설정하는 경우(예: vm.items[indexOfItem] = newValue
길이를 수정하는 경우) 예: vm.items.length = newLength
이 문장은 무엇을 의미하나요? Object.defineProperty가 index 속성을 통해 속성의 accessor 속성을 설정할 수 있다는 것을 테스트했는데 왜 모니터링할 수 없나요?
포럼에서 배열의 길이가 가변적이기 때문에 길이가 5라도 인덱스가 4가 아닐 수도 있다고 하더군요. 길이를 수정하면 이 답변이 어디서 나오는지 묻고 싶습니다. 새 요소가 끝에 추가되고 해당 값은 정의되지 않으며 인덱스를 통해 값을 얻을 수도 있습니다. 왜 "인덱스 4가 없을 수 있습니까?"
이제 배열의 길이를 알았으니 모든 요소를 순회하고 세트를 추가하고 인덱스 속성을 통해 모든 요소에 접근할 수 없는 이유는 무엇입니까? 동시에 뷰를 업데이트할 수 있나요?
성능 문제를 고려하여 요소 콘텐츠에 의미 있는 값이 4개만 있다고 가정하지만 길이가 실제로 1000이라면 1000개의 요소에 대한 검색 작업을 수행하는 것이 불가능합니다. 그런데 관계자는 JS의 한계 때문이라고 하더군요. 이 한계가 무엇인지 알고 싶습니다. 이 문제를 해결하는 데 도움을 주셔서 대단히 감사합니다
이 문제에 직면했을 때 제가 말씀드리고 싶은 것은 우선 길이가 1000이지만 요소가 4개인 배열이 반드시 성능에 영향을 미치는 것은 아니라는 것입니다. js for 루프 외에도 데이터 순회에는 forEach, map, filter, some 등도 포함됩니다. for 루프(for, for...of)를 제외하고 다른 순회는 모두 키 값 순회입니다. 즉, 이 네 가지 요소를 제외하면 외부의 빈 공간은 통과되지 않으므로 성능 손실이 없습니다. 루프 본문에 작업이 없으면 성능에 미치는 영향은 무시할 수 있습니다. 길이는 10000이지만 각각 for와 forEach 순회를 사용한 결과는 다음과 같습니다.
var arr = [1]; arr[10000] = 1 function a(){ console.time() for(var i = 0;i<arr.length;i++)console.log(1) console.timeEnd() } a(); //default: 567.1669921875ms a(); //default: 566.2451171875ms function b(){ console.time() arr.forEach(item=>{console.log(2)}) console.timeEnd() } b(); //default: 0.81982421875ms b(); //default: 0.434814453125ms
var arr = [1,2,3,4] arr.forEach((item,index)=>{ Object.defineProperty(arr,index,{ set:function(val){ console.log('set') item = val }, get:function(val){ console.log('get') return item } }) }) arr[1]; // get 2 arr[1] = 1; // set 1
vm.items[indexOfItem] = newValue
로 인해 발생하는 배열 요소의 변경 사항을 vue 감지할 수 없는 이유는 무엇입니까? 요소가 존재하고 모니터링됩니까? vm.items[indexOfItem] = newValue
导致的数组元素改变呢,哪怕这个下标所对应的元素是存在的,且被监听了的?
为了搞清楚这个问题,我用vue的源码测试了下,下面是vue对数据监测的源码:
可以看到,当数据是数组时,会停止对数据属性的监测,我们修改一下源码:
使数据为数组时,依然监测其属性,然后在defineReactive函数中的get,set打印一些东西,方便我们知道调用了get以及set。这里加了个简单判断,只看数组元素的get,set
然后写了一个简单案例,主要测试使用vm.items[indexOfItem] = newValue
이 문제를 명확히하기 위해 vue의 소스 코드로 테스트했습니다. 다음은 vue의 데이터 모니터링 소스 코드입니다.
데이터를 다음과 같이 만듭니다. 배열을 읽을 때 해당 속성을 계속 모니터링한 다음 DefineReactive 함수의 get 및 set에 무언가를 인쇄하면 get 및 set이 호출되었음을 알 수 있습니다. 여기에 간단한 판단이 추가됩니다. 배열 요소의 가져오기를 보면 됩니다. set
vm.items[indexOfItem] = newValue
를 사용하여 배열 요소를 변경할 수 있는지 테스트하는 간단한 사례를 작성했습니다. 렌더링 페이지 세트가 먼저 실행된 다음 데이터가 업데이트되고 페이지가 다시 렌더링되며 배열이 두 번 순회되는 것을 볼 수 있습니다.
하지만! ! ! 배열이 실제로 반응하게 되었습니다. 이는 js 구문 기능이 배열 모니터링을 제한하지 않음을 의미합니다.
여기에서는 길이가 3인 배열로 테스트하고 있습니다. 배열의 길이를 9
으로 늘리면 get을 18번 실행한 후에도 요소를 두 번 클릭하면 관리도 계속되는 것을 볼 수 있습니다. , 렌더링 시에도 두 번 통과됩니다.
위 실험을 통해 vue에서 배열이 반응적으로 업데이트될 수 있다는 결론을 내렸지만 Youda가 이 기능을 추가하지 않은 이유를 이해할 수 없습니다. 알려 주시기 바랍니다.
관련 기사: 관련 동영상:배열 변경 감지-Wheat Academy Vue.js 동영상 튜토리얼
위 내용은 Vue가 배열 변경을 감지할 수 없는 이유는 무엇입니까? 그 이유는 다음과 같습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!