vue数据双向绑定的原理

vue数据双向绑定的原理

参考网址
https://www.cnblogs.com/libin-1/p/6893712.html

原理

	通过数据劫持结合发布者-订阅者模式的方式来实现的

数据劫持：每一个属性都有setter和getter(set方法和get方法)

Object.defineProperty() ：它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举

    如果想要在执行console.log(book.name)的同时，直接给书名加个书名号，那要怎么处理呢？或者说要通过什么监听对象 Book 的属性值。
    这时候Object.defineProperty( )就派上用场了

var Book = {}
var name = '';
 Object.defineProperty(Book, 'name', {
     set: function (value) {
         name = value;
         console.log('你取了一个书名叫做' + value);
     },
     get: function () {
         return '《' + name + '》'
     }
 })
 Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
 console.log(Book.name);  // 《vue权威指南》

手动实现数据双向绑定原理

• 首先要对数据进行劫持监听，要设置一个监听器Observer
  用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。

• 因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，
  然后在监听器Observer和订阅者Watcher之间进行统一管理的。

• 接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，
  将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，
  此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

---

因此接下去我们执行以下3个步骤，实现数据的双向绑定：

• 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

   var library = {
       book1: {
           name: ''
       },
       book2: ''
   };
  
   function defineReactive (data, key, val) {
       observe(val)
       Object.defineProperty(data, key, {
           enumerable: true, // 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中
           configurable: true, // 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除
           get: function() {
               return val;
           },
           set: function(newVal) {
               val = newVal;
               console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');
           }
       });
   }
  
   function observe (data) {
       if (!data || typeof data !== 'object') {
           return 
       }
       // console.log(Object.keys(data)) // ['book1', 'book2']
       Object.keys(data).forEach(function (key, index) {
           defineReactive(data, key, data[key])
       })
   }
   observe(library)
   library.book1.name = 'vue权威指南'; // 属性name已经被监听了，现在值为：“vue权威指南”
   library.book2 = '没有此书籍';  // 属性book2已经被监听了，现在值为：“没有此书籍” 
  

• 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

• 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器