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

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

abandon地址：https://github.com/yelloxing/abandon

目录结构

最外层大体说明一下：

• demo:使用用例
• dist:打包后的框架代码
• scripts:源码编译脚本
• src:源码

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

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

入口文件

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

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

render函数

目录：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和虚拟结点有关，添加虚拟结点以后应该会对应调整。

后记

这篇文章会随着abandon的更新同步更新，目前刚刚起步，略做笔记。