Vue가 배열 변경을 감지할 수 없는 이유는 무엇입니까? 그 이유는 다음과 같습니다

문제 설명: 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

결과가 매우 분명하다는 것을 알 수 있습니다. 그러나 for 루프에서 아무런 작업도 수행되지 않으면 두 요소의 속도는 다음과 같습니다. 거의 똑같습니다

두 번째로 말씀드리고 싶은 것은 이 한계가 무엇인지 모른다는 것입니다. (⇀‸↼‶) ╮( •́Ω•̀ )╭

Object.defineProperty() 메소드가 직접 정의할 것입니다. 객체의 새 속성을 지정하거나 객체의 기존 속성을 수정하고 객체를 반환합니다. 배열의 인덱스도 속성이므로 배열 요소의 변경 사항을 모니터링할 수 있습니다

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

그러나 요소를 추가하면 이 새 속성을 모니터링하지 않기 때문에 청취 이벤트가 트리거되지 않습니다. 속성을 삭제하는 경우 true입니다.

주요 질문으로 돌아가서, 배열을 모니터링할 수 있으므로 아래 첨자가 해당하는 경우에도 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를 사용하여 배열 요소를 변경할 수 있는지 테스트하는 간단한 사례를 작성했습니다. 렌더링 페이지

실행 페이지 🎜🎜🎜🎜를 보면 get을 6번 실행한 후 배열의 길이가 3이 되어 배열이 두 번 탐색되었음을 알 수 있습니다. 두 번 이하입니다. 페이지가 한 번 렌더링되면 데이터가 한 번만 사용되더라도 데이터에 대한 수신 이벤트가 여러 번 트리거될 수 있습니다. 구체적인 세부 사항은 코드 작성 방법에 따라 결정되어야 합니다. 예를 들어, 모니터링되는 데이터가 배열인 경우 dependencyArray 함수가 실행됩니다(코드는 위 그림의 get 구현에 있음). 이 함수에서는 배열을 탐색하여 값을 얻습니다. 여기서는 주로 데이터의 arr 배열을 모니터링하는 Vue가 dependencyArray 함수를 트리거합니다. 🎜🎜예를 들어 요소 중 하나를 클릭하면 3🎜🎜🎜을 클릭했습니다.

세트가 먼저 실행된 다음 데이터가 업데이트되고 페이지가 다시 렌더링되며 배열이 두 번 순회되는 것을 볼 수 있습니다.

하지만! ! ! 배열이 실제로 반응하게 되었습니다. 이는 js 구문 기능이 배열 모니터링을 제한하지 않음을 의미합니다.

여기에서는 길이가 3인 배열로 테스트하고 있습니다. 배열의 길이를 9

으로 늘리면 get을 18번 실행한 후에도 요소를 두 번 클릭하면 관리도 계속되는 것을 볼 수 있습니다. , 렌더링 시에도 두 번 통과됩니다.

위 실험을 통해 vue에서 배열이 반응적으로 업데이트될 수 있다는 결론을 내렸지만 Youda가 이 기능을 추가하지 않은 이유를 이해할 수 없습니다. 알려 주시기 바랍니다.

관련 기사:

vue의 배열 변경 감지 문제

반환된 json을 배열로 변환할 수 없는 이유

관련 동영상:

배열 변경 감지-Wheat Academy Vue.js 동영상 튜토리얼

위 내용은 Vue가 배열 변경을 감지할 수 없는 이유는 무엇입니까? 그 이유는 다음과 같습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!