Nano_Vue2

Nano_Vue2 aims to further understand the inner workings of Vue2

Implemented Features

• global API:
  • NanoVue.mixin
  • NanoVue.component
  • NanoVue.extend
• options / Data:
  • data
  • watch
  • computed
  • methods
• options / DOM:
  • el
  • template
  • render
• options / Lifecycle Hook:
  • beforeMount
  • mounted (only root instance)
• instance property:
  • $data
  • $options
  • $el
• instance method / data:
  • $watch
  • $set
• instance method / lifecycle:
  • instance.$mount
  • instance.$nextTick
• directives:
  • v-for
  • v-if
  • v-on

Initial Flow

HTML String 
(👇parse👇) 
              Abstract Struct Tree 
                (👇generate👇)
                                  Render Function 
                                   (👇invoke👇)
                                                  Virtual DOM 
                                                  (👇patch👇)
                                                              DOM

Reactive

Reactive = Observer pattern + Object.defineProperty

Observer pattern = Watcher(Observer) + Dep(observale object)

Contact me

• WeChat：ys5-14
• Email: [email protected]