EcmaScript6 Proxy代理实现Vue.Js双向绑定

首先，我们先来看一下Vue实现双向绑定的代码：

Vue双向绑定

    
{{ message }}
    

感觉蛮有意思的，想自己用Js实现一遍，想到了定义一个对象，输入表单后，这对象增加值，然后监听，进行改变，于是便想到了ES5里面的一个方法defineProperty。
代码如下：

    
        
        
    
    
        

            表单的值为:
        
        
        
    

ES5实现原理

然后ES6语法，采用Proxy代理，观察者模式，Proxy可以拦截很多种方法，详情可见我上一篇博客。现在来看代码：

            const obj = {}
            const newObj = new Proxy(obj, {
                get: function(target, key, receiver) {
                    return Reflect.get(target, key, receiver)
                },
                set: function(target, key, value, receiver) {
                    if(key === 'value') {
                        document.getElementById('value').innerHTML = newValue;
                        document.getElementById('inputValue').value = newValue;
                    }
                    return Reflect.set(target, key, value, receiver)
                }
            })

            function onKeyUp(event) {
                newObj.value = event.target.value
            }

于是这样，Vue的双向绑定就完成啦！