Fork me on GitHub

MVVM

双向绑定白话版(angualrjs vs vue)


vue-mvvm

单双向绑定原理

双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,

vue双向绑定

  1. 通过Object.defineProperty方法实现对数据的劫持,在每一个劫持的数据里面添加一个消息订阅器,维护一个数组,用来收集订阅者。
  2. 订阅者(Watcher)是在解析模板指令的时候,每解析一个创建一个,Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
  3. 数据代理

引用

segmentfault

angularjs脏检查

脏检查触发条件

  1. DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
  2. XHR响应事件 ( $http )
  3. 浏览器Location变更事件 ( $location )
  4. Timer事件( $timeout , $interval )
  5. 执行 $digest() 或 $apply()

angularjs绑定流程

Angular 每一个绑定到UI的数据,就会有一个 $watch 对象,这个对象会被push到watchList中。

1
2
3
4
5
6
7
8
9
10
watch = {
name:'', //当前的watch 对象 观测的数据名
getNewValue:function($scope){ //可以得到当前$scope 上的最新值
...
return newValue;
},
listener:function(newValue,oldValue){ // 当数据发生改变时需要执行的操作
...
}
}
1
2
3
4
5
6
7
8
9
$scope.prototype.$watch = function(name,getNewValue,listener){
var watch = {
name:name,
getNewValue : getNewValue,
listener : listener || function(){}
};

this.$$watchList.push(watch);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var scope = new $scope();
scope.hello = 10;
scope.$watch('hello', function(scope) {
// 注意,要理解这里的this ,这个函数实际是 var newValue = watch.getNewValue(this);
// 这样调用,那么 this 就指的是当前监听器watch,所以可以得到name
return scope[this.name]
},
function(newValue, oldValue) {
console.log('newValue:' + newValue + '~~~~' + 'oldValue:' + oldValue);
})
scope.$digest();
scope.hello = 10;
scope.$digest();
scope.hello = 20;
scope.$digest();
1
2
3
4
5
6
7
8
9
10
11
12
13
$scope.prototype.$digest = function(){
var list = this.$$watchList;
for(var i = 0,l= list.length;i++){
var watch = list[i];
var newValue = watch.getNewValue(this);
// 在第一次渲染界面,进行一个数据呈现.
var oldValue = watch.last;
if(newValue!=oldValue){
watch.listener(newValue,oldValue);
}
watch.last = newValue;
}
}

引用

cnblogs