首先，获取所有使用单向绑定的元素：constbindingElements=[...document.querySelectorAll('[my-bind]')];获取绑定表达式公式：bindingElements.forEach(el=>{constexpression=el.getAttribute('my-bind');});由于得到的表达式是一个字符串，所以需要构造一个函数来执行它，得到表达式的结果：constexpression=el.getAttribute('my-bind');constresult=newFunction('"usestrict";\nreturn'+expression).call(viewModel);代码中会动态创建一个函数，内容是将字符转换成字符串解析后执行，返回结果（类似eval，但更安全）。只需将结果放在页面上：el.textContent=result;结合上面的viewModel:constbindingElements=[...document.querySelectorAll('[my-bind]')];window.viewModel=newProxy({},{//设置全局变量方便调试set(obj,prop,value){if(obj[prop]!==value){obj[prop]=value;bindingElements.forEach(el=>{constexpression=el.getAttribute('my-bind');constresult=newFunction('"usestrict";\nreturn'+expression).call(obj);el.textContent=result;});}returntrue;}});如果真正运行在浏览器中，改变viewModel中属性的值就会触发页面的更新。在示例中，写了循环将更新所有绑定的元素。更好的方法是仅更新依赖于当前已更改属性的元素。这时候就需要分析绑定表达式的属性依赖关系。为简单起见，可以使用正则表达式来解析属性依赖：letmatch;while(match=/this(?:\.(\w+))+/g.exec(expression)){match[1]//属性依赖}添加事件绑定事件绑定就是绑定原生事件，当事件触发时执行绑定表达式，表达式调用viewModel中的某个回调函数。以点击事件为例。依旧是获取所有绑定点击事件的元素，执行表达式（表达式的值被丢弃）。与单项绑定不同的是需要传入事件的event参数来执行表达式。[...document.querySelectorAll('[my-click]')].forEach(el=>{constexpression=el.getAttribute('my-click');constfn=newFunction('$event','"usestrict";\n'+expression);el.addEventListener('click',event=>{fn.call(viewModel,event);});});函数对象构造函数，第一个n-1个参数是生成的函数对象的参数名，最后一个是函数体。代码中构造了一个包含$event参数的函数，函数体是直接执行绑定表达式。双向绑定双向绑定是单项绑定和事件绑定的结合。绑定元素的input事件修改viewModel的属性，然后通过单独绑定元素的value属性来修改元素的值。这里有一个更完整的例子：http://sandbox.runjs.cn/show/…。完整代码放在我的github仓库使用Proxy实现双向绑定的优缺点与vuejs属性替换相比，Proxy实现的绑定至少有以下三个优点：不需要预先定义属性被束缚。vuejs要替换属性（getters，setters），首先要知道需要替换哪些属性，这就导致需要预先定义需要替换的属性，也就是vuejs中的data方法。vuejs中的data方法必须完整定义所有的绑定属性，否则对应的绑定将无法正常工作。Vue无法检测到对象属性的增删：属性或方法“XXX”未在实例上定义，但在渲染时被引用。确保在数据选项中声明响应式数据属性。Proxy不需要它，因为它监听整个对象。对阵列兼容性很好。虽然数组中的方法可以替换（push、pop等），但是数组下标不能用属性替换，所以必须创建一个set方法给数组下标赋值。ViewModel对象更容易调试。由于vuejs将对象中的所有成员都替换成了属性，所以如果想直接使用Chrome自带的调试工具查看属性值，就得在属性后面一一点击(...)：因为获取到的值propertyisactuallyexecution方法的执行可能会产生副作用，Chrome将这个决定留给了开发者。不需要代理对象。Proxy的set方法只是一层包装。Proxy对象本身维护着原始对象的值。自然是可以直接把原来的值展示给开发者。查看一个Proxy对象，只需要展开它的内置属性[[Target]]，就可以看到原对象所有成员的值。你甚至可以看到哪些get和set函数包装了原始对象——如果那是你感兴趣的话。虽然使用Proxy实现双向绑定的优点很明显，但缺点也很明显：Proxy是ES2015的一个特性，不能编译成ES5，也不能Polyfilled。IE自然被消灭；其他主流浏览器也较晚实现：Chrome49、Safari10。浏览器兼容性大大限制了Proxy的使用。但相信随着时间的推移，基于Proxy的前端MVVM框架也会出现在开发者的面前。