简易vue实现原理

Html

Css


    {{a.a}}
    {{b}}

class Dep {
    constructor() {
        this.subs = [];
    }
    addsub(item) {
        this.subs.push(item);
    }
    implement() {
        this.subs.forEach(i => {
            i.update();
        });
    }
}
class Watcher {
    constructor(vm, reg, fn) {
        this.vm = vm;
        this.reg = reg;
        this.fn = fn;
        Dep.target = this;
        let arr = reg.split(".");
        let val = vm;
        arr.forEach(a => {
            val = val[a];
        });
        Dep.target = null;
    }
    update() {
        let val = this.vm;
        let arr = this.reg.split(".");
        arr.forEach(a => {
            val = val[a];
        });
        this.fn(val);
    }
}

let vm = new Vue({
    data: {
        a: {
            a: "数据A"
        },
        b: "数据B"
    },
    el: "#app"
});

function observe(data) {
    return new Observe(data);
}

function Compile(el, vm) {
    vm.$el = document.querySelector(el);
    let fragment = document.createDocumentFragment();
    while ((child = vm.$el.firstChild)) {
        fragment.appendChild(child);
    }
    replace(fragment);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

简易vue实现原理



代码描述：简单的看懂vue的实现原理

简易的vue，帮助读者理解vue的基本是实现原理

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

denglie

相关代码

简易vue实现原理

最新