ES6 Proxy 학습, Object. defineProperty 와 의 비교, 양 방향 연결 사례

머리말
Vue. js 3.0 은 데이터 감청 수단 으로 프 록 시 를 사용 하기 시 작 했 으 니 오늘 배 워 보 겠 습 니 다.
오늘 우리 가 해 야 할 일 은:

문법 공부

Object. defineProperty 와 의 비교

vue 와 유사 한 v - model 사례

를 작성 합 니 다.
MDN 문서
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
완 일 봉 ES6 수첩
http://es6.ruanyifeng.com/#docs/proxy
기본 문법
아주 간단 합 니 다. 두 개의 인자 만 있 고 하나 도 없습니다.

let p = new Proxy(target, handler);

범례:

const originalObj = {
    name: 'xialei'
};
const publicObj = new Proxy(originalObj, {
    set(target, prop, value) {
        //          
        target[prop] = value.toString().toUpperCase();
    }
});

publicObj.name = 'xialei';
console.log(publicObj.name); // XIALEI

13 가지 방법
응 우 옌 일 펑 의 매 뉴 얼 을 보면 ES6 Proxy 는 13 가지 방법 이 있 는데 그 중에서 대부분이 적 게 사용 하 는 방법 이 고 주로 get, set 이다.
프 록 시 납치 배열 의 범례

let arr = [2,4];
let proxy = new Proxy(arr, {
  set(target, prop, value) {
    target[prop] = value * 2.5
    return true
  }
})
proxy[4] = 11
console.log(proxy[4]) // 27.5
proxy.push(22)
console.log(proxy) //         55

Object. defineProperty 와 의 대비
Object. defineProperty (obj, prop, descriptor) 인자 obj 는 속성 대상 을 정의 합 니 다.prop 에서 정의 하거나 수정 할 속성의 이름 입 니 다.descriptor 가 정의 하거나 수정 할 속성 설명자 입 니 다.
보 이 는 곳:

Object. defineProperty 는 한 대상 의 단일 속성 에 대해 setter 와 getter 를 설정 하고 Proxy 는 납치 대상 자체 이 며 대상 자체 에 setter 와 getter 를 설정 합 니 다.

Object. defineProperty 는 수 정 된 대상 을 되 돌려 주 고, Proxy 는 납 치 된 대상 을 되 돌려 주 는 것 과 유사 하 다.

Proxy 는 배열 을 납치 할 수 있 고 Object. defineProperty 는 그 럴 능력 이 없습니다.

프 록 시 는 납치 방법 이 매우 많 고 Object. defineProperty 는 단일 하 다. 이름 때문에 속성 에 만 수식 을 추가 하기 로 결정 했다.

Proxy 로 양 방향 연결 사례 쓰기
나 는 2018 년 9 월 에 일부 문 서 를 참고 한 후에 Object. defineProperty 를 바탕 으로 하 는 양 방향 연결 사례 (https://www.jianshu.com/p/34fd579dfc0b) Vue 2.0 은 바로 그것 에 기초 한 것 이다.현재 Vue 3.0 은 2020 년 1 분기 에 출시 되 며, 오늘 프 록 시 기반 사례 를 작성 한다.대량의 코드 가 작년 글 을 계속 사용 하고 있 습 니 다. 이 사례 에서 코드 가 유일 하 게 변동 해 야 할 것 은 입 니 다.observer 원형 방법.
원래 의 쓰 기 는:

    Vue.prototype._observer = function (data) {
        var self = this;
        Object.keys(data).forEach(function (key) {
            var oldValue = data[key];
            self._binding[key] = {
                _updaterList: []
            }
            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: true,
                get: function () {
                    return oldValue;
                },
                set: function (newValue) {
                    if (oldValue === newValue) return;
                    oldValue = newValue;
                    self._binding[key]._updaterList.forEach(function (updater) {
                        updater.update();
                    })
                }
            });
        })
    }

현재 쓰 는 방법 은:

    Vue.prototype._observer = function (data) {
        Object.keys(data).forEach(key => {
            this._binding[key] = {
                _updaterList: []
            }
        });
        this.$data = new Proxy(data, {
          get: (target, prop, value) => {
            return target[prop]
          },
          set: (target, prop, value) => {
            if (target[prop] === value) return;
            target[prop] = value
              this._binding[prop]._updaterList.forEach(function (updater) {
                  updater.update();
              })
          }
        });
    }