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

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