vue手写源码详解二

vue手写源码详解二

本章讲解如何根据指定的数据渲染控制区域

我们可以通过获取元素来判断有没有用v-model或者{{}}，同时可以用指定的数据来替换，但这样做有一个弊端如数据发生变化那么页面就需要从新渲染，这样高频的渲染显然是我们不想看到的，网页卡顿的同时给用户也造成了很差的体验

那么有什么办法可以去规避这个问题那，其实可以通过把控制区域内的元素放入内存中，在内存中把所有的数据替换好，这样一次性即可渲染到网页上

那么我们需要的处理步骤分为三步

第一步：将网页上的元素放入内存中

如何把网页内的元素放入内存中那，使用DocumentFragment（文档碎片）这个方法可以完成，感兴趣可以百度看看

第二步：利用指定的数据编译内存中的元素

第三步：将编译好的内容重新渲染回网页上

class Nue {
    constructor(options){
        // 1.保存创建时候传递过来的数据
        if(this.isElement(options.el)){
            this.$el = options.el;
        }else{
            this.$el = document.querySelector(options.el);
        }
        this.$data = options.data;
        // 2.根据指定的区域和数据去编译渲染界面
        if(this.$el){
            new Compiler(this);
        }
    }
    // 判断是否是一个元素
    isElement(node){
        return node.nodeType === 1;
    }
}
class Compiler {
    constructor(vm){
        this.vm = vm;
        // 1.将网页上的元素放到内存中
        let fragment = this.node2fragment(this.vm.$el);
        console.log(fragment);
        // 2.利用指定的数据编译内存中的元素
        // 3.将编译好的内容重新渲染会网页上
    }
    node2fragment(app){
        // 1.创建一个空的文档碎片对象
        let fragment = document.createDocumentFragment();
        // 2.编译循环取到每一个元素
        let node = app.firstChild;
        //当node元素为undefined就不会走到下发循环内
        while (node){
            // 注意点: 只要将元素添加到了文档碎片对象中, 那么这个元素就会自动从网页上消失
            fragment.appendChild(node);
            //每次获取第二个依次类推，做了个循环
             //借用变量提升重新赋值上面的node
            node = app.firstChild;
        }
        // 3.返回存储了所有元素的文档碎片对象
        return fragment;
    }
}