Vue源码理解之：自定义学习框架iCrush

作者：心叶
时间：2019-11-02 18:13

这是一篇用于说明iCrush v0.1版本的项目，iCrush是一个用于vue.js源码学习而开发的小型前端框架。

纯洁的VUE开发项目，最新版本，可供直接使用：https://github.com/yelloxing/...

目录结构

最外层大体说明一下：

别的文件就不说了，我们主要是来看看src源码里面的几个主要文件。

大家看的时候，应该先看src/core/instance/index.js，下面，我们来说明一下其中必要重要的几个文件。

目录：src/core/instance/index.js

我们把abandon对象的各个部分划分到不同的文件中去了，这是为了方便维护，而index.js文件的作用就是分别引入这些文件，然后挂载好接口，最终，启动对象初始化，创建好实例。

目录：src/core/vnode/create-element.js

未来我们会添加虚拟结点，其次目前其实不存在vnode。

这个文件的作用是把template变成render函数。举例子：

<div>
    <label>
        值：
    </label>
    <input v-model='value'/>
</div>

转变以后就是：

createElement('div',{},[
    createElement('label',{},'值：'),
    createElement('input',{
        "v-model":"value"
    })
]);

这个render和虚拟结点有关，添加虚拟结点以后应该会对应调整。