Git Product home page Git Product logo

mini-vue's Introduction

mini-vue

文件目录

├── index.js  
├── init.js
├── lifecycle.js
├── render.js
├── state.js
└── compiler
    ├── index.js
    ├── generate.js
    ├── parse-html.js
└── observe
    ├── index.js
    ├── array.js
    ├── watcher.js
└── utils
    ├── index.js
└── vdom
    ├── create-element.js
    └── patch.js

index.js

Vue的入口文件,当实例化Vue的时候,会进行初始化操作。内部会调用各种mixin方法给Vue的原型上添加方法

  1. initMixin:在Vue原型上添加初始化方法
  2. renderMixin:在Vue原型上添加渲染方法,调用render方法拿到VNode --> render.js
  3. lifecycleMixin:在Vue原型上添加_update方法,将VNode转换成真实DOM --> lifecycle.js

其他目录

  1. compiler 将template字符串转换成ast语法树 --> 生成render方法
  2. observe 数据观测,响应式原理的实现
  3. vdom 调用render方法生成VNode,以及将VNode渲染成真实DOM

mini-vue's People

Contributors

hsbao avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.