vue
2019-10-17 本文已影响0人
撑船的摆渡人
vue是一个渐进式的框架,核心内容是 数据驱动视图和和组件化思想
vue双向数据绑定
数据劫持结合发布者 - 订阅者 模式实现双向数据绑定。
数据劫持,通过Object.defineProperty() 来劫持对象属性的setter 和 getter 操作,在数据变动时做你想要做的事情.
function Archiver() {
var temperature = null;
var archive = [];
Object.defineProperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
archive.push({ val: temperature });
}
});
this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]
view 更新 data 通过事件监听实现,比如input标签监听 input事件。
data 更新 view ,对数据就行劫持监听,所以我们需要设置监听器Observer,用来监听属性发生变化,告诉订阅者 Watcher 看是否需要更新。由于订阅者有很多,我们需要一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间统一管理。我们还需要一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。