Vueソースコードの理解:カスタム学習フレームabandon

作者:心葉時間:2019-11-02 18:13
これはabandon v 1のバージョンを説明するためのプロジェクトです.abandonはvue.jsのソースコード学習のために開発された小型のフロントエンドフレームです.
abandonアドレス:https://github.com/yelloxing/abandon
ディレクトリ構造
最外層は大体説明します.

デモ:使用例

dist:パッケージされたフレームコード

scripts:ソースコンパイルシナリオ

src:ソースコード

その他のファイルは言わないで、私達は主にSrcソースの中のいくつかの主要なファイルを見にきます.
皆さんが見る時は、まずSrc/core/instance/index.jsを見て、その中で必要な重要ないくつかの書類を説明します.
インポートファイル
目次:src/core/instance/index.js
私たちはabandonオブジェクトの各部分を異なるファイルに分割しました.これはメンテナンスを容易にするためで、index.jsファイルの役割はそれぞれこれらのファイルを導入して、インターフェースをマウントして、最後に対象を初期化して、事例を作成します.
レンダー関数
目次:src/core/vnode/create-element.js
将来は仮想ノードを追加します.次は現在のところvnodeは存在しません.
このファイルの役割はtemplateをrender関数に変えることです.例:

    
         ：
    
    

変わった後は:

createElement('div',{},[
    createElement('label',{},' ：'),
    createElement('input',{
        "v-model":"value"
    })
]);

このレンダーは仮想ノードと関連していますので、仮想ノードを追加すると調整に対応するはずです.
後記
この文章はabandonの更新と同時に更新されます.今は始めたばかりです.メモを取ります.