Vue-动态数据绑定

Posted 2020-11-02 ppjuan

任务2.3 考虑传递回调函数。在实际应用中，当特定数据发生改变的时候，我们是希望做一些特定的事情的，而不是每一次都只能打印出一些信息。所以，我们需要支持传入回调函数的功能。举个例子。

 1  let app1 = new Observer({
 2          name: ‘youngwind‘,
 3          age: 25
 4  });
 5 
 6  // 你需要实现 $watch 这个 API
 7  app1.$watch(‘age‘, function(age) {
 8          console.log(`我的年纪变了，现在已经是：${age}岁了`)
 9  });
10 
11  app1.data.age = 100; // 输出：‘我的年纪变了，现在已经是100岁了‘

想法：执行的时候动态绑定处理函数 handler ，那么就要在 $watch 函数里面重新设置 app1.__ptoto__.convert() 里面的 set() ；但是怎么在保留旧的代码的基础上，加上新的函数，不懂。看了看IFE给的参考资料：发布订阅模式是靠自定义事件实现的，我的思路错了。。

自定义事件：

 1 var fireEvent = function(element,event){  
 2         if (document.createEventObject){  
 3             // IE浏览器支持fireEvent方法  
 4             var evt = document.createEventObject();  
 5             return element.fireEvent(‘on‘+event,evt)  
 6         }  
 7         else{  
 8             // 其他标准浏览器使用dispatchEvent方法  
 9             var evt = document.createEvent( ‘htmlEvents‘ );  
10             evt.initEvent(event, true, true);  
11             return !element.dispatchEvent(evt);  
12         }  
13     };