Vue实现原理是什么-创新互联

var obj = {};
Object.defineProperty(obj,"name",{
    get() {
        return document.querySelector("#name").innerHTML;
    },
    set(val) {
        document.querySelector("#name").innerHTML = val;
    }
})
obj.name = "Aaron";

以上代码则是需要完成的功能，保证所有功能全部都能实现。

首先我们要考虑的是，要创建一个Vue的类，该类接收的是一个options的对象，也就是我们在实例化Vue的时候需要传递的参数。

class QVue {
    constructor(options){
        //  缓存options对象数据
        this.$options = options;
        //  取出data数据，做数据响应
        this.$data = options.data || {};
    }
}

通过上面的代码可以看出了，为什么我们可以在Vue实例上通过this.$data拿到我们所写的data数据。

对数据已经进行了缓存之后，接下来要做的事情就是对数据进行观察，达到数据变化之后能够做出对虚拟Dom的操作。

class QVue {
    constructor(options){
        this.$options = options;
        //  数据响应
        this.$data = options.data || {};
        //  监听数据变化
        this.observe(this.$data);
        //  主要用来解析各种指令，比如v-modal，v-on:click等指令
        new Compile(options.el,this);
        //  执行生命周期
        if(options.created){
            options.created.call(this);
        }
    }
    // 观察数据变化
    observe(value){
        if(!value || typeof value !== "object"){
            return;
        }
        let keys = Object.keys(value);
        keys.forEach((key)=> {
            this.defineReactive(value,key,value[key]);
            //  代理data中的属性到vue实例上
            this.proxyData(key);
        })
    }
    //  代理Data
    proxyData(key){
        Object.defineProperty(this,key,{
            get(){
                return this.$data[key];
            },
            set(newVal){
                this.$data[key] = newVal;
            }
        })
    }
    //  数据响应
    defineReactive(obj,key,val){
        //  解决数据层次嵌套
        this.observe(val);
        const dep = new Dep();
        Object.defineProperty(obj, key,{
            get(){
                //  向管理watcher的对象追加watcher实例
                //  方便管理
                Dep.target && dep.appDep(Dep.target);
                return val;
            },
            set(newVal){
                if(newVal === val){
                    return;
                }
                val = newVal;
                // console.log(`${key}更新了：${newVal}`)
                dep.notify();
            }
        })
    }
}

我们对data数据中的每一项都进行了数据挟持，可是然而并没有什么卵用啊，我们并没有对相对应的虚拟dom进行数据改变，当然我们肯定是不能把我们的需要更改的虚拟dom操作写在这里，然而在Vue中对其Dom进行了特殊的处理，慢慢的向下看。

想要做数据响应要做一个做具体更新的类何以用来管理这些观察者的类

//  管理watcher
class Dep {
    constructor() {
        //  存储
        this.deps = [];
    }
    //  添加watcher
    appDep(dep){
        this.deps.push(dep);
    }
    //  通知所有的watcher进行更新
    notify(){
        this.deps.forEach((dep) => {
            dep.update();
        })
    }
}
//  观察者 做具体更新
class Watcher {
    constructor(vm,key,cb){
        //  Vue实例
        this.vm = vm;
        //  需要更新的key
        this.key = key;
        //  更新后执行的函数
        this.cb = cb;
        //  将当前watcher实例指定到Dep静态属性target
        //  用来在类间进行通信
        Dep.target = this;
        //  触发getter,添加依赖
        this.vm[this.key];
        Dep.target = null;
    }
    update(){
        this.cb.call(this.vm,this.vm[this.key]);
    }
}

Dep.target = this上面这段代码一定要注意，是向Dep类中添加了一个静态属性。

主要用来解析各种指令，比如v-modal，v-on:click等指令。然后将模版中的变量替换成数据，渲染view，将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据发生变动，收到通知，更新视图。

简单说下双向绑定，双向绑定原理，在编译的时候可以解析出v-model在做操作的时候，在使用v-model元素上添加了一个事件监听（input），把事件监听的回调函数作为事件监听的回调函数，如果input发生变化的时候把最新的值设置到vue的实例上，因为vue已经实现了数据的响应化，响应化的set函数会触发界面中所有依赖模块的更新，然后通知哪些model做依赖更新，所以界面中所有跟这个数据有管的东西就更新了。

class Compile {
    constructor(el,vm) {
        //  要遍历的宿主节点
        this.$el = document.querySelector(el);
        this.$vm = vm;

        //  编译
        if(this.$el){
            //  转换宿主节点内容为片段Fragment元素
            this.$fragment = this.node2Fragment(this.$el);
            //  执行编译过程
            this.compile(this.$fragment);
            //  将编译完的HTML结果追加至宿主节点中
            this.$el.appendChild(this.$fragment);
        }
    }

    //  将宿主元素中代码片段取出来，遍历，这样做比较高效
    node2Fragment(el){
        const frag = document.createDocumentFragment();
        //  将宿主元素中所有子元素**（搬家，搬家，搬家）**至frag中
        let child;
        //  如果 el.firstChild 为undefined或null则会停止循环
       while(child = el.firstChild){
            frag.appendChild(child);
        }
        return frag;
    }

    compile(el){
        //  宿主节点下的所有子元素
        const childNodes = el.childNodes;
        Array.from(childNodes).forEach((node) => {
            if(this.isElement(node)){
                //  如果是元素
                console.log("编译元素"+node.nodeName)
                //  拿到元素上所有的执行,伪数组
                const nodeAttrs = node.attributes;
                Array.from(nodeAttrs).forEach((attr) => {
                    //  属性名
                    const attrName = attr.name; 
                    //  属性值
                    const exp = attr.value;     
                    //  如果是指令
                    if(this.isDirective(attrName)){
                        //  q-text
                        //  获取指令后面的内容
                        const dir = attrName.substring(2);
                        //  执行更新
                        this[dir] && this[dir](node,this.$vm,exp);
                    }
                    //  如果是事件
                    if(this.isEvent(attrName)){
                        //  事件处理
                        let dir = attrName.substring(1);    //  @
                        this.eventHandler(node,this.$vm,exp,dir);
                    }
                })
            }else if(this.isInterpolation(node)){
                //  如果是插值文本
                this.compileText(node);
                console.log("编译文本"+node.textContent)
            }
            //  递归子元素，解决元素嵌套问题
            if(node.childNodes && node.childNodes.length){
                this.compile(node);
            }
        })
    }
    //  是否为节点
    isElement(node){
        return node.nodeType === 1;
    }
    //  是否为插值文本
    isInterpolation(node){
        return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
    }
    //  是否为指令
    isDirective(attr){
        return attr.indexOf("q-") == 0;
    }
    // 是否为事件
    isEvent(attr){
        return attr.indexOf("@") == 0;
    }

    //  v-text
    text(node,vm,exp){
        this.update( node, vm, exp, "text");
    }
    textUpdater(node,value){
        node.textContent = value;
    }

    //  双向绑定
    //  v-model
    model(node,vm,exp){
        //  指定input的value属性，模型到视图的绑定
        this.update(node,vm,exp,"model");
        //  试图对模型的响应
        node.addEventListener('input',(e) => {
            vm[exp] = e.target.value;
        })
    }
    modelUpdater(node,value){
        node.value = value;
    }

    //  v-html
    html(node,vm,exp){
        this.update(node,vm,exp,"html")
    }
    htmlUpdater(node,value){
        node.innerHTML = value;
    }
    
    //  更新插值文本
    compileText(node){
        let key = RegExp.$1;
        this.update( node, this.$vm, key, "text");
    }
    //  事件处理器
    eventHandler(node,vm,exp,dir){
        let fn = vm.$options.methods && vm.$options.methods[exp];
        if(dir && fn){
            node.addEventListener(dir,fn.bind(vm));
        }
    }

    //  更新函数 - 桥接
    update(node,vm,exp,dir){
        const updateFn = this[`${dir}Updater`];
        //  初始化
        updateFn && updateFn(node,vm[exp]);
        //  依赖收集
        new Watcher(vm,exp,function(value){
            updateFn && updateFn(node,value);
        })
    }
}

其实Compile整个编译过程，就是在做一个依赖收集的工作，然Vue知道每一个指令是做什么的。并做出对应的更新处理。

Vue整体的编译过程，因为vue所编写的指令html无法进行识别，通过编译的过程可以进行依赖收集，依赖收集以后把data中的数据和视图进行了关联，产生了依赖关系，如果以后数据模型发生变化我们可以通过这些依赖通知这些视图进行更新，这是执行编译的目的，就可以做到数据模型驱动视图变化。

看完了这篇文章，相信你对Vue实现原理是什么有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。