利用 Proxy API 实现一个简易 MVVM

vue 3 使用了 proxy api，有些手痒，就弄一个简单的结构玩玩吧。Proxy API 见 MDN Proxy

效果图

思路

依赖收集：Mvvm 初始化时劫持数据，并设置观察者 dep。模仿 vue 结构是在 get 时往观察者 dep 推入被观察者 watcher，然后 set 时让观察者通知所有被观察者开始更新。

数据响应：这里只是简单在 compiler 里面去扫描了一遍所有带着 v-text 和 v-model 钩子的标签做了处理：定义被观察者 watcher，被观察者的触发函数写上节点 DOM 的更新。

当然我们知道 vue 的数据响应过程比这个复杂多了，有着虚拟 DOM 和复杂的 diff 算法。

代码

为什么时 Proxy 而不是 Object.defineProperty ？

我们知道 Vue2.0 的反应系统是使用 Object.defineProperty 的 getter 和 setter。 但是，Vue 3 将使用 ES2015 Proxy 作为其观察者机制。 这消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。

而为什么使用 Proxy 替代 Object.defineProperty？Proxy 可以劫持整个对象，并返回一个新的对象。Proxy 不仅可以代理对象，还可以代理数组，还可以代理动态增加的属性。节省内存，速度加倍。

为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建