This is the second day of my November challenge

reactive

The reactive() function can only take Object

Reactive uses ES6’s New Proxy() to add proxies to objects for data hijacking

Reactive source code core implementation


function reactive( obj ){
    return createReactiveObject(obj)
}

function createReactiveObject(obj){
    const proxy = new Proxy(obj, {
        get : function (obj, key, receiver= {}){
            const res = Reflect.get(obj, key, receiver)
            // Call track() to collect dependencies
            return res
        },
        set : function(obj, key, value, receiver = {} ){
             let oldValue = obj[key]
            // The receiver is this, that is, the proxy
            const result = Reflect.set(obj, key, value, receiver)
            if(oldValue ! == value){// Call trigger() to trigger the update
            }
            return result
        },
        
    })
    return proxy
}

let obj = {a : 1}
let objProxy = reactive(obj)
objProxy.a = 2
console.log(objProxy.a)
Copy the code

ref

The ref() function can take arguments of either Object or primitive data types

If it’s Object, go to Reactive ()

For basic data types, data hijacking is implemented through getters and setters of ES6 classes

Getters and setters for ES6 classes are essentially implemented through object.defineProperty and get and set methods

Ref source code core implementation

function ref(value){
    return createRef(value)
}

function createRef(rawValue){
    return new RefImpl(rawValue)
}

class RefImpl {
    constructor(_rawValue){
        // Class this executes an instance of the class
        this._value = _rawValue
    }
    
    get value() {// Call effect track to collect dependencies
        track()
        return this._value
    }
    
    set value(newVal) {// Call the effect trigger to trigger the update
        trigger()
        this._value = newVal
    }
}

let a = ref("123")
console.log(a.value)
a.value = "456"
console.log(a.value)

Copy the code

Reactive and REF

Reactive and REF are both used to define reactive data.

Parameters to Reactive can only be complex data types; The parameters of a REF can be basic or complex data types

Reactive is preferred for defining complex data types; Ref prefers to define primitive types.

Reactive is the data hijacking implemented by ES6 Proxy. Ref implements data hijacking of complex data types by calling Reactive and basic data types by get/set of Object.defineProperty.

ES6 Proxy agent

The Proxy object is used to create a Proxy for an object, enabling interception and customization of basic operations

ES6 Reflect the reflection

Reflect is a new API for manipulating objects in ES6.

Reflect Object inheritance

Reflect.__proto__ === Object.prototype
Copy the code

Reflect is similar to Object, but is more readable and provides a more elegant way to manipulate objects. Its methods are aligned with the Proxy

ES6 migrates some of Object’s methods that are clearly internal to the language to Reflect (some methods currently exist on both Object and Reflect), and future new methods will only be deployed on Reflect.

The Reflect object modifies the results returned by some methods to make them more reasonable.

The Reflect Object implements an imperative operation on Object using a function.

Reflect.set(target, propertyKey, value[, receiver])

  • Target The target object for which the property is set

  • PropertyKey Specifies the name of the property set

  • Value Specifies the value

  • Receiver If there is a setter on the target object, receiver is the this value when the setter is called.

/ / reflection
var obj = {
     a: 1.set : function(a){
        this.a = a
     }
}
var receiver = {
    a : 2
}

Reflect.set(obj, 'a'.11)
console.log(obj.a)
console.log(receiver.a)

Reflect.set(obj, 'a'.3, receiver)

console.log(obj.a)
console.log( receiver.a)

Copy the code