硬着头皮了解一波vue的底层原理,看到博客的一枚作者总结的不错,于是大略的看一遍,思路分析特别清晰,感觉自己像是懂了,像是没懂,也不知道自己不懂的地方卡在哪里.所以以下还是借鉴博客的作者的思路,做了二次总结,希望自己可以更加清晰了解vue双向数据绑定的原理;
所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素添加了change事件,来动态修改model和view.
实现数据绑定的做法大致如下几种:
发布者-订阅者模式 (这种模式的代码,我不是很了解,他们之间做了什么)
脏值检查:
setInterver定时轮询检测数据变动.
angular只会在事件触发以下
DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()
数据劫持
vue主要采用数据劫持结合发布者-订阅模式的方式,通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时将消息传给订阅者,触发相应的监听回调;
实现MVVM以下几点:
1.实现一个数据监听器observe,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2.实现一个指令解析器compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数;
3.实现一个watcher,作为连接observer和compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数.从而更新视图
暂时总结到这;
参考链接: https://github.com/DMQ/mvvm
