作者：心叶
时间：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的更新同步更新，目前刚刚起步，略做笔记。