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

心叶

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

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

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

项目地址:https://github.com/yelloxing/iCrush

目录结构

最外层大体说明一下:

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

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

src.png

大家看的时候,应该先看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和虚拟结点有关,添加虚拟结点以后应该会对应调整。

阅读 933

Vue2学习之旅
从基础开始学习vue2

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措...

303 声望
114 粉丝
0 条评论

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措...

303 声望
114 粉丝
文章目录
宣传栏