vue 양방향 데이터 귀속 실현

본고의 실례는 모두에게 vue가 쌍방향 데이터 연결을 실현하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다.
vue 중수 그룹과 대상은 서로 다른 귀속 방식을 채택하였다

1.vue 객체 데이터 바인딩

(1) 데이터 탐지
js에서 Object를 사용합니다.defineProperty() 및 ES6의 proxy를 사용하여 객체 탐지
vue2에서.x에서는 Object를 사용합니다.defineProperty()를 사용하여 객체에 대한 데이터 스캔을 수행하려면 먼저 Object를 수행합니다.defineProperty 패키지에는 다음과 같은 코드가 있습니다.

function defineReactive(data, key, val){
    if(typeof val === 'object') new Observer(val)
    let dep = new Dep();
    Object.defineProperty(data, key, val) {
    enumerable: true,
    configurable: true,
    get: function () {
        dep.depend();
        return val;
    },
    set: function() {
        if(val === newVal) {
            return ;
        }
        val = newVal;
        dep.notify()
    }
}
}

전달해야 할 매개 변수는 데이터, 키,val뿐입니다. 데이터의 키에서 데이터를 읽을 때마다 get를 터치하고 수정된 데이터는 set를 터치합니다.
(2) 수집에 의존
먼저 의존을 수집하고 속성이 바뀔 때까지 기다렸다가 수집된 의존 순환을 한 번 터치하면 됩니다. getter에서 의존을 수집하고setter에서 의존을 터치하면 됩니다.
종속 클래스 Dep

export default class Dep {
    constructor() {
        this.subs = []
    }
    
    addSub() {
        this.subs.push(sub)
    }
    
    removeSub(sub) {
        remove(this.subs, sub)
    }
    
    depend() {
        if(window.target) {
            this.addSub(window.target)
        }
    }
    
    notify() {
        const subs = this.subs.slice()
        for(let i = 0, l = subs.length; i < l; i++) {
            subs[i].update()
        }
    }
}
 
function remove(arr, item) {
    if(arr.length) {
        const index = arr.indexOf(item)
        if(index > -1) {
            return arr.splice(index, 1)
        }
}
}

watcher 클래스는 저희가 수집한 의존입니다.

export default class Watcher {
    constructor(vm, expOrFn, cb) {
        this.vm = vm
        this.getter = parsePath(expOrFn)
        this.cb = cb
        this.value = this.get()
    }
    
    get() {
        window.target = this
        let value = this.getter.call(this.vm, this.vm)
        window.target = undefined
        return value
    }
    
    update() {
        const oldValue = this.value
        this.value = this.get()
        this.cb.call(this.vm, this.value, oldValue)
    }
}

(3) 모든 키 반복 탐지(Observer)

export class Observer {
    constructor(value) {
        this.value = value;
        
        if(!Array.isArray(value)) {
            this.walk(value)
        }
    }
    walk(obj) {
        const keys = Object.keys(obj)
        for(let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i], obj[keys[i]])
        }
    }
}

Observer 클래스는 대상의 모든 속성을 응답식으로 바꾸는 것이다

2. Array의 변화 탐지

(1) 수조 중 변화 추적은 차단기 덮어쓰기 원형 방법

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto);
// 
['push','pop','shift','unshift','splice','sort','reverse'].forEach(function (method) {
    const original = arrayProto[method]
    Object.defineProperty(arrayMethods, method, {
        value: function mutator(...args) {
              return original.apply(this, args)
        },
        enumerable: false,
        writable: true,
        configurable: true
    })
})

차단기 덮어쓰기 원형 한마디

value.__proto__ = arrayMethods

__ 이 없으면proto__속성, vue는 이array Methods를 탐지된 그룹에 마운트합니다
수조는 대상과 유사합니다. 모두 getter에서 의존을 수집하고, 수조는 실제 차단기에 의존합니다.
그룹 의존은 Observer 실례에 저장됩니다. 의존은 getter와 차단기에서 접근할 수 있어야 합니다.
__ob__매거진할 수 없는 속성입니다. 이 속성의 값은 현재 Observer 실례입니다.
Dep 인스턴스를 Observer 속성에 저장합니다. value에 __ob__속성, 반복적으로 Observer 실례를 만들 필요가 없습니다. 반복 탐지value의 변화를 피할 수 있습니다
픽셀 의존 알림 보내기

this.__ob__.dep.notify();

(2).데이터 변화를 탐지하는 구체적인 방법
순환수 그룹의 모든 항목은observe 함수를 실행하여 변화를 탐지합니다

observeArray(items) {
    for(let i = 0; l = items.length; i < l; i++) {
        observe(items[i]);    
    }
}

수조는 새로운 원소를 탐지해야 한다
push, unshift, splice 등을 차단하고args를 inserted에 저장합니다

if(inserted) ob.observeArray(inserted)

요약:

Array가 변화를 추적하는 방식은 Object와 다르기 때문에 우리는 차단기를 만들어서 수조의 원형을 덮어쓰는 방식으로 변화를 추적합니다. 전역 Array를 오염시키지 않기 위해서입니다.prototype, 우리는 Observer에서 변화를 탐지해야 하는 그룹에만 __proto__원형을 덮어씁니다.
Array 수집 의존 방식은 Object와 마찬가지로 getter에서 수집하고 차단기에서 터치하며 Observer 실례에 의존합니다.Observer에서 탐지된 데이터마다 __ob__,그리고 this(Observer)를 __에 저장합니다.ob__위에서 같은 데이터가 한 번만 탐지되고 __를 쉽게 통과할 수 있도록 하기 위해ob__Observer 인스턴스에 저장된 의존도를 가져옵니다.수조는 모든 수조 항목을 응답식으로 순환해야 한다. 수조에 원소가 추가될 때 우리는 파라미터를 추출한 다음observeArray를 사용하여 추가된 데이터에 대해 변화 탐지를 한다. 수조에 대해서는 원형 방법만 차단할 수 있고 일부 특유의 방법에 대해서는 차단할 수 없다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.