深くvue

class Cue {
    constructor(options) {
        this.$el = document.querySelector(options.el);
        this.$data = options.data;

        this._render();
    }

    _render() {
        const renderEle = node => {
            Array.from(node.childNodes).forEach(el => {
                switch (el.nodeType) {
                    case document.ELEMENT_NODE: //1
                        renderEle(el);
                        break;
                    case document.TEXT_NODE: // 3
                        el.data = el.data.replace(/\{\{\w+\}\}/g, str => {
                            const name = str.substring(2, str.length - 2);
                            return this.$data[name];
                        });
                }
            });
        };

        renderEle(this.$el);
    }
}

const cm = new Cue({
    el: "#root",
    data: {
        name: "cherries",
        age: 18
    }
});

     
    

     
    



    let _person = {
        name: "cherries",
        age: 18
    };

    let person = new Proxy(_person, {
        get(obj, name) {
            return obj[name];
        },
        set(obj, name, value) {
            obj[name] = value;
            dataToHtml();
        }
    });

    let aTxt = Array.from(document.querySelectorAll("#root input"));

    //    
    dataToHtml();

    aTxt.forEach(oTxt => {
        oTxt.oninput = () => {
            htmlToData(oTxt);
        };
    });

    function htmlToData(oTxt) {
        const name = oTxt.getAttribute("v-model");
        person[name] = oTxt.value;
    }

    function dataToHtml() {
        aTxt.forEach(oTxt => {
            const name = oTxt.getAttribute("v-model");
            console.log(person[name]);
            oTxt.value = person[name];
        });
    }

//  v-model  ===   :value + @input

computed: {
    // name() {},
    name: { //     data        
        get() {
        },
        set() {
        }
    }
}

watch: {
    name() {}, //             
    'obj.key'() {},

}

vm.$watch('json', (newVal, oldVal) => {}, { deep: true }) // deep