Vue源码 模拟Vue 3 实现数据的双向绑定

主要是输入框，
这时候我们需要创建于给setVal方法实时修改数据。
这里如果我们绑定的是一个对象，
那我们需要遍历到最底层去修改这个数据，所以取数组长度并且做一个判断，就是遍历到底的时候我给他赋值。
这样就实现数据双向绑定了，

数据双向绑定总结 主要是v-model,当数据影响视图可以直接利用watcher的回调函数来更新视图，当视图影响数据时，定义一个setVal方法，将最新的值与keys传进去，在里面通过修改vm.$data来修改数据，从而达到视图影响数据效果。

实现代理，就是每次不用写this.$data.name而是直接写this.name

一开始

这里的data指的是this.$data，故我们修改数据都要通过this. $data去获取修改
这时，在外部可以实现一个代理，通过this指向，获取修改数据，如图

此时我们修改数据有两种方式，一种是this.$ data.name去走里面那层，一种是this.name直接走代理。相当于给this对象，也就是Vue对象添加上所有的属性方法并且进行一个监听。
没有代理前


this上是没有这些属性的。

代理后，

而且我们的data里也有，所以才能两个都用。

代理总结，也就是在this.$data的基础上，在Vue类外层，也添加了data里面的每个属性的监听，object.defineproperty（this,key,{get(){},set(){}})。这样就能通过this.去获取数据并且修改数据。

全部总结

Vue的MVVM模式，主要就是在new Vue的时候，有三个类，一个Complie，一个Observer,一个Watcher,这三个类通过Dep类进行关联。首先是Observer，实现数据监听，主要是将数据传进去，通过object.defineproperty每个属性的set方法和get方法来对数据进行监听。还有创建Dep类，通过Dep类来将所有订阅者加到一起，并且通过Dep.notify()来通过订阅者数据修改。

接着是Complie类，它负责将一开始的数据渲染并且后续的数据修改更新视图，首先创建一个文档碎片对象，并将所有的节点放进去，接着通过判断将每个节点一一进行数据更新，接着就把文档碎片对象挂载到app上面去。在进行数据更新的时候，会new Watcher,创建订阅者，在创建订阅者之初会获取data里面的值，所以会调用到get函数，在get函数里面，将订阅者一一加入到dep中，这样就实现加入订阅者的功能。接着更新数据的时候，会调用set函数，set函数中调用dep.notify（）来通过wathcer修改视图，watcher调用本身的update方法，获取最新的值进行判断并且调用一开始创建wathcer时的回调函数，通过Complie类实现视图更新。

接着要实现双向数据绑定，主要是model即输入框，创建setVal方法，通过事件绑定input，获取事件对象e.target.value获取视图上输入的值，并且通过setVal进行更新，达到更新数据的功能。

最后是代理，一开始我们的数据是在this.$data里面坚挺的，所以可以在Vue类里面，定义一个方法，在Vue类上就对这些数据进行一个监听，也是通过object.defineproperty，将第一个参数指向Vue类，遍历每个属性，并为其监听，这样在Vue类上就有这些数据和这些数据的get,set方法，并且可以通过this.name去获取或者修改数据了。