1. 程式人生 > >Vue-動態數據綁定

Vue-動態數據綁定

pre 數據綁定 data code reat 基礎上 一次 應用 console

任務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 };

Vue-動態數據綁定