vue Learning II: changes in object detection Watcher

Similarly, we can show up and run the test code. Of course this is a look at each class, according to my own understanding sort out. There are original export default canceled, a convenient test file. Add a file vuetest02.js, copy the following code

class Dep {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    // removeSub(sub) {
    //     remove(this.subs, sub);
    // }
    depend() {
        if (window.target) {
            this.addSub(window.target)
        }
    }
    notify() {
        const subs = this.subs.slice();
        for (let i = 0; i < subs.length; i++) {
            subs[i].update();
        }
    }
}
const bailRE = /[^\w.$]/

function parsePath(path){
    if (bailRE.test(path)) {
        return; 
    }
    const path.split Segments = ( '.'); 
    return function (obj) { 
        IF (! obj) return; 
        //console.log(obj); 
        for (the let I = 0; I <segments.length; I ++ ) { 
            //console.log(segments[i]); 
            obj = obj [Segments [I]]; 
        } 
        return obj; 
    } 
} 

var window = {}; // global property page analog 

class Watcher { 
    constructor (VM, expOrFn , CB) { 
        this.vm = VM; 
        // perform this.getter (), can be obtained data.abc content 
        this.getter = parsePath (expOrFn); 
        this.cb = CB;         
        this.value = this.get (); 
        the console.log ( "this.value. .. "+ this.value); 
    } 
    GET () {
        window.target = this;
        let value = this.getter.call(this.vm, this.vm);
        window.target = undefined;
        return value;
    }
    update() {
        const oldValue = this.value;
        this.value = this.get();
        this.cb.call(this.vm, this.value, oldValue);
    }
}

class Observer {
    constructor(value) {
        this.value = value;
        if (!Array.isArray(value)) {
            this.walk(value);
        }
    }
    walk(obj) {
        const keys = obj.keys(obj);
        for (let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i], obj.keys[i])
        } 
    } 
} 

Function defineReactive (Data, Key, Val) { 
    // add recursively sub-attribute 
    IF (typeof Val == 'Object') { 
        new new the Observer (Val); 
    } 
    the let new new Dep = DEP (); 
    Object.defineProperty (Data, Key, { 
        Enumerable: to true, 
        Configurable: to true, 
        GET: function () { 
            dep.depend (); 
            return Val; 
        }, 
        SET: function (newVal) { 
            IF (Val === newVal) { 
                return; 
            } 
            val = newVal;
            dep.notify ();             
        } 
    }) 
} 

// 01 with the same data as the test preparation. 
var Base = {}; 
defineReactive (Base, "name", "Kevin"); 

// prepare a method of modifying the DOM. That is as long as the property changed to help me call this method 
function updateVm (vm, newVal, oldValue) { 
    console.log ( `the appearance of the control by the new value changes ... newVal = $ {newVal}, oldValue = $ { } `oldValue); 
} 

the let new new Watcher Watch = (Base," name ", updateVm); 
base.name =" Witty "; 
base.name =" witty2 "; 
base.name =" witty3 "; 
the console.log (" Finished test.")

　　In the command window, run: node vuetest02.js

You will find that there are two problems, the following is a screenshot of the test