vue3.0 two-way data binding Proxy

Vue3's two-way data binding principle mainly relies on two core concepts: responsive system and virtual DOM

The responsiveness in Vue3.0 uses the Proxy method in ES6 .

Features:

As a new standard, Proxy will be subject to continuous performance optimization by browser manufacturers.
Proxy can observe more types than defineProperty, and Proxy supports monitoring changes in arrays and nested properties, making Vue3 more responsive.
Proxy is not compatible with IE, and there is no polyfill. defineProperty can support IE9
Object.definedProperty in Vue2 is a property of the hijacked object. New elements need to be definedProperty again. Proxy hijacks the entire object and does not require special processing.
When using defineProperty, we can trigger interception by modifying the original obj object. When using proxy, we must modify the proxy object, that is, the instance of Proxy, to trigger interception.

Proxy objects are used to define custom behaviors for basic operations (such as property lookup, assignment, enumeration, function calls, etc.)

grammar:

const p = new Proxy(target, handler)

The parameter targetrepresents the object to use Proxythe wrapper (can be any type of object, including a native array, a function, or even another proxy)

A parameter handleris an object that usually has functions as attributes. The functions in each attribute define p the behavior of the agent when performing various operations.

let obj = {
    a: 1,
    b: 2
}
const proxy = new Proxy(obj, {
    get: function(target, prop, receiver) {
        return prop in target ? target[prop] : 0
    },
    set: function(target, prop, value, receiver) {
                //目标对象，属性名，属性值，Proxy对象本身,最后一个参数可选。
        target[prop] = 666
    }
})
console.log(proxy.a) // 1
console.log(proxy.c) // 0
proxy.a = 10
console.log(proxy.a) // 666
obj.b = 10
console.log(proxy.b) // 不是666 而是10

In the above code, obj is the target object we want to proxy. The get and set methods are the two attributes of the parameter handler , as follows:

handler.get() receives three parameters. The first parameter target is the target object of the proxy. The second parameter prop is the attribute of the target object of the proxy. The third parameter is Proxy or an object that inherits Proxy, usually the proxy itself. .

handler.set() receives four parameters, three of which are the same as the get method, except that an extra value represents the new attribute value.

The above code indicates that when accessing the proxy attribute, interception is performed to determine whether the attribute is an attribute of the target object. If so, its value is returned, otherwise 0 is returned.

When the attribute on the proxy is rewritten, the value of the rewritten attribute is assigned to 666.

Note: The hijacking of data at this time only hijacks the proxy object proxyand objhas nothing to do with the original object, objand the operation will not be monitored.

Use proxyto implement a simplified version of the data response:

<body>
    <h2 id="app"></h2>
  <input id="input" type="text" />
</body>

let app = document.getElementById('app')
let input = document.getElementById('input')

let obj = { // 源数据
  text:'hello world'
}

let proxy = new Proxy(obj, {
  set: function(target, prop, value){ // input事件触发进行劫持，触发update方法
    target[prop] = value
    update(value)
  }
})

function update(value){ // update方法用于同步dom更新
    app.innerHTML = value
    input.value = value
}

input.addEventListener('input',function(e){ // 监听input数据变化，并修改proxy的值
  proxy.text = e.target.value
})

proxy.text = obj.text // 初始化源数据