Typescript version of Vue

RoadMap of Features

• Reactivity

  • Dep
  • Observer
    • Observe plain object
    • Observe Array
    • add/delete property
  • Watcher
    • Asynchronous Execution Update watchers in an async queue
    • Watch object deeply
    • Watch object lazily

• VDom

  • Patch(Update DOM according to old vnodes and new vnodes)
    • Diff vnode
    • Scoped ID (css)
    • Update properties of new vnode's corresponding HTMLElement
      • class
      • style
      • DOM events
      • DOM properties & DOM attributions(Frankly, I am confused about the differences)

• [x] Vue Instance

  • Lifecycle
    • beforeCreate,create,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed
    • Vue.prototype._update Invoke patch process between new vnode and old vnode
    • Vue.prototype.$destroy
    • Method: mountComponent Create render watcher for Vue instance
  • Event
    • $on
    • $off
    • $once
  • Render
    • Vue.prototype_render Construct vnode tree according to state of Vue instance(props,state...)
    • Vue.prototype.$createElement Constructor of vnode(used in render function)
  • State
    • Initialization of options props
    • Initialization of option methods
    • Initialization of option data
    • Initialization of options computed
    • Initialization of options watch

• Component

  • basic
  • slot
  • scoped-slot
    • static slot name
    • dynamic slot name
  • Keep-alive
  • functional
  • custom directive
  • async component

• Filter

• Directive

• Transition

  • Involve vnode hook remove

• Util

  • nextTick

• Error Handling

  • Vue.config.errorHandle
  • RenderError
  • Vue.prototype.errorCapture

• Global-API

  • Vue.extend
  • Vue.mixin Behind the scene, method mergeOptions play a magnificent role in Vue.extend & Vue.mixin

• Compiler

Sth Learned

code style

• always execute user defined function in a try-catch block