由浅到深vue源码(一、双向数据绑定原理)
vue简介
vuejs简介
1.是一个构建用户界面的框架
2.是一个轻量级的MVVM(Model-View-ViewModel),其实就是所谓的数据的双向绑定
3.数据驱动和组件化的前端开发
4.通过简单的API就能实现响应式的数据绑定和组合的视图组
MVVM框架
M(Model,模型层 ), V(View,视图层), VM(ViewModel,视图模型,V与M连接的桥梁)
1.MVVM框架实现了数据双向绑定 2.当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改 3.修改V层则会通知M层数据进行修改 4.MVVM框架实现了视图与模型层的相互解耦
双向数据绑定的方式
+发布-订阅者模式(backbone.js)
一般通过pub、sub的方式来实现数据和视图的绑定,但是使用起来比较麻烦
+脏值检查(angular.js)
angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图。类似于通过定时器轮训检测数据是否发生了改变。
+数据劫持
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式。通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 vuejs不兼容IE8以以下的版本
Vue实现思路
实现一个Compiler模板解析器,能够对模版中的指令和插值表达式进行解析,并且赋予不同的操作 实现一个Observer数据监听器,能够对数据对象的所有属性进行监听 实现一个Watcher观察者,将Compile的解析结果,与Observer所观察的对象连接起来,建立关系,在Observer观察到对象数据变化时,接收通知,同时更新DOM 创建一个公共的入口对象,接收初始化的配置并且协调上面三个模块,也就是vue
发布-订阅者模式,也叫观察者模式 它定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖于它的对象都会得到通知并自动更新,解决了主体对象与观察者之间功能的耦合。
例子:微信公众号
订阅者:只需要要订阅微信公众号 发布者(公众号):发布新文章的时候,推送给所有订阅者
优点: 解耦合
订阅者不用每次去查看公众号是否有新的文章 发布者不用关心谁订阅了它,只要给所有订阅者推送即可