Vue-dynamic data binding

Task 2.3 Consider passing a callback function. In practical applications, when specific data changes, we want to do some specific things, instead of printing out some information every time. So, we need to support the ability to pass in callback functions. for example.

1   let app1 = new Observer({
 2           name: 'youngwind' ,
 3           age: 25
 4  });
 5  
6   // You need to implement the $watch API 
7   app1.$watch('age', function (age) {
 8           console.log(`My age has changed, it is now: ${age} old`)
 9  });
 10  
11   app1.data.age = 100; // Output: 'My age has changed, now it is is 100 years old'

Idea: Dynamically bind the handler function handler during execution, then reset the set() in app1.__ptoto__.convert() in the $watch function; but how to add a new one on the basis of retaining the old code function, I don't know. I looked at the reference materials given by IFE: The publish-subscribe model is implemented by custom events, and my thinking is wrong. .

Custom event:

1  var fireEvent = function (element,event){  
 2          if (document.createEventObject){  
 3              // IE browser supports fireEvent method   
4              var evt = document.createEventObject();  
 5              return element.fireEvent('on'+ event, evt)  
 6          }  
 7          else {  
 8              // Other standard browsers use dispatchEvent method   
9              var evt = document.createEvent( 'HTMLEvents' );  
 10              evt.initEvent(event, true , true );  
 11             return !element.dispatchEvent(evt);  
12         }  
13     };