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