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接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。

上一篇下一篇

猜你喜欢

热点阅读