根据流程图来理一下实现一个MVVM:
![9e60455c77d13e2704597e3953778263.png](https://i-blog.csdnimg.cn/blog_migrate/ad4d6b26740c1522e04a5a8462cfb9b5.jpeg)
如上图所示,我们可以看到,整体实现分为四步:
1、实现一个Compile,对指令进行解析,初始化视图,并且订阅数据的变更,绑定好更新函数
2、实现一个Observer,对数据进行劫持,通知数据的变化
3、实现一个Watcher,将其作为以上两者的一个中介点,在接收数据变更的同时,让Dep添加当前Watcher,并及时通知视图进行update。
4、实现MVVM,整合以上三者,作为一个入口函数
流程解读
第一步:创建MVVM、Compile类,并且利用createDocumentFragment将
第二步:对 标签 进行编译,将带有 v- 指令的标签和{{ }}的标签解析出来
第三步:创建Observer类进行数据劫持、深度递归劫持,当data中设置值或者修改值的时候,利用Object.defineProperty对值进行监控。
第四步:创建Watch类观察者,用新值和老值进行比对,如果发生变化,就调用更新方法,进行视图更新。
第五步:将输入框v-model和视图绑定起来,输入框的值变化,同时页面中通过{{}}绑定的值也变化,实现双向数据绑定。
![9db40f485836a73b93549fe6e4c5b619.png](https://i-blog.csdnimg.cn/blog_migrate/a8d83ddde0f07c11fe7e5d4ca5f1e887.jpeg)
![c308ebafc3aa527380893760af9ca8d2.png](https://i-blog.csdnimg.cn/blog_migrate/7747d8d6d576a7ee9816f3ee6643d9d2.jpeg)
代码比较粗糙,核心就是这些了。应该来说一定要掌握的,因为Vue,Watcher,Dep等都是大家非常熟悉的构造函数了,创造实例只是前面多了一个关键字 new。其他的平常都很熟悉了。