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的更新同步更新，目前剛剛起步，略做筆記。