Vue3.0 응답식 원리 분석

vue-next

호응식 원리

Vue2.0에서는 Object를 사용합니다.defineProperty 중의setter와getter는 데이터 대상을 차단하고 내부에서 대상과 그룹에 대한 모니터링을 많이 사용하여 메모리를 소모한다.그 다음에 그룹을 length로 바꾸는 것은 무효입니다.객체가 없는 속성은 차단할 수 없습니다.

Vue3.0 응답식 원리 핵심: Proxy-based change detection은 Proxy를 바탕으로 이루어진 데이터 변화 모니터링을 바탕으로 한다.ES6의 두 가지 기능을 사용한 Proxy 및 Reflect

Proxy는 목표 대상에 앞서'차단'을 설치하고 외부에서 이 대상에 대한 방문을 반드시 이 층을 통해 차단해야 하기 때문에 외부의 방문을 필터하고 고칠 수 있는 메커니즘을 제공했다고 이해할 수 있다.
Reflect는 Object, Function 또는 전역 함수에 원생의 일부 흩어진 방법(예를 들어 apply, delete, get, set 등)을 Reflect에 통일적으로 분포시켜 원생 API를 더욱 편리하고 통일적으로 관리할 수 있다.
proxy의 단점

비호환성 IE11

Proxy를 이용한 데이터 차단

프록시 실례를 생성합니다. target은 프록시할 대상 대상을 표시하고hander도 하나의 대상으로 차단 행위를 맞춤형으로 설정합니다.

let proxy = new Proxy(target, handler);

hander는 get,set,delete,has 등

const handler = {
    get: function(target, key, receiver) {
        ...
    },
    set: function(target, key, value, receiver) {
        ...
    },
    deleteProperty(target, key) {
        ...
    }
  }

을 포함하여 각 동작의 논리를 어떻게 처리하는지 설명한다.
수집 의존

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Vue 3.0 핸드 돋보기 효과

실현 해 야 할 효 과 는 고정 확대 두 배,마우스 가 왼쪽 그림 영역 에 들 어 갈 때 커버 층 이 표시 되 고 떠 날 때 커버 층 이 숨겨 집 니 다. 홈 페이지 의 용법,마지막 으로 return{target}을...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Vue3.0 응답식 원리 분석

vue-next

좋은 웹페이지 즐겨찾기