手撕Vue-提取元素到内存

合集 - 手写Vue全家桶(16)

1.Vue双向数据绑定原理-上2023-09-272.Vue双向数据绑定原理-中2023-09-303.Vue双向数据绑定原理-下2023-09-304.手撕Vue-构建Vue实例2023-10-03

5.手撕Vue-提取元素到内存2023-10-14

6.手撕Vue-查找指令和模板2023-10-157.手撕Vue-编译指令数据2023-10-158.手撕Vue-编译模板数据2023-10-159.手撕Vue-监听数据变化2023-10-1510.手撕Vue-数据驱动界面改变上2023-10-1511.手撕Vue-数据驱动界面改变中2023-10-1512.手撕Vue-数据驱动界面改变下2023-10-1913.手撕Vue-界面驱动数据更新2023-10-2114.手撕Vue-实现事件相关指令2023-10-2115.手撕Vue-实现将数据代理到Vue实例2023-10-2116.手撕Vue-实现计算属性2023-10-21

收起

接着上一篇文章，我们已经实现了构建Vue实例的过程，接下来我们要实现的是提取元素到内存。

主要是通过文档碎片来实现，文档碎片是一个轻量级的文档，可以包含和控制节点，但是不会像真实的DOM那样占用内存，所以我们可以通过文档碎片来提高性能。

大致的思路是这样的：

1. 创建一个空的文档碎片对象
2. 编译循环取到每一个元素
3. 返回存储了所有元素的文档碎片对象

在这个思路当中有一个注意点：

!> 只要将元素添加到了文档碎片对象中, 那么这个元素就会自动从网页上消失

大概是这样的，例如我们页面当中有一个 p 元素，我们将这个元素添加到文档碎片当中，那么这个元素就会从页面上消失，但是我们可以通过文档碎片对象来访问这个元素。

好了基本上就是这样的，我们来看一下代码：

// 2.根据指定的区域和数据去编译渲染界面
if (this.$el) {
    new Compiler(this);
}

class Compiler {
    constructor(vm) {
        this.vm = vm;

        // 1.将网页上的元素放到内存中
        let fragment = this.node2fragment(this.vm.$el);
        console.log(fragment);
    }

    node2fragment(app) {
        // 1.创建一个空的文档碎片对象
        let fragment = document.createDocumentFragment();

        // 2.编译循环取到每一个元素
        let node = app.firstChild;
        while (node) {
            fragment.appendChild(node);
            node = app.firstChild;
        }

        // 3.返回存储了所有元素的文档碎片对象
        return fragment;
    }
}