深入 vue

一、原理

1.渲染

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
    }
});

2.双向绑定

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

二、computed 计算属性

• 缓存: 只在 data 变化时重新计算 提高性能
• 可读可写

computed: {
    // name() {},
    name: { // 命名和 data 中的不能一样 
        get() {
        },
        set() {
        }
    }
}

三、watch 监听值得变化(注意: 不要在 watch 中修改数据)

watch: {
    name() {}, // 名字和监听的变量名称一样
    'obj.key'() {},

}

vm.$watch('json', (newVal, oldVal) => {}, { deep: true }) // deep 是否深层监视