源码分析思维导图

源码就是指编写的最原始程序的代码。运行的软件是要经过编写的，程序员编写程序的过程中需要他们的"语言"。下图列举了vue响应式源码分析，有platforms、runtime、core、instance、observer，收藏下图学习吧！

源码分析

• vue
  • platforms/web
    • entry-runtime-with-compiler.js
      • Vue.prototype.$mount: el template render 判断
      • { render } = compileToFunctions()
    • compiler/index.js
      • compileToFunctions = createCompiler(
        • ast = parse(template)
        • optimize(ast, options)
        • code = generate(ast, options)
        • return { ast, render: code.render }
        • )
  • platforms/runtime
    • index.js
      • Vue.prototype.$mount: mountComponent()
      • Vue.prototype.__patch__: patch
    • patch.js
  • compiler/index.js
    • createCompiler: createCompilerCreator()
  • compiler/create-compiler.js
    • createCompilerCreator: createCompileToFunctionFn()
  • compiler/to-function
    • createCompileToFunctionFn: render = createFunction()
    • createFunction: new Function(code)
  • core
    • index.js
      • initGlobalAPI(Vue)
  • core/instance
    • index.js
      • Vue: _init()
      • initMixin(Vue)
      • stateMixin(Vue)
      • eventsMixin(Vue)
      • lifecycleMixin(Vue)
      • renderMixin(Vue)
    • lifecycle.js
      • mountComponent:
        • callHook(vm, 'beforeMount')
        • updateComponent: vm._update(vm._render())
        • new Watcher(vm, updateComponent)
        • callHook(vm, 'mounted')
      • lifecycleMixin:
        • Vue.prototype._update: vm.$el = vm.__patch__()
    • init.js
      • initMixin:
        • Vue.prototype._init:
          • initLifecycle(vm)
          • initEvents(vm)
          • initRender(vm)
          • callHook(vm, 'beforeCreate')
          • initInjections(vm) // resolve injections before data/props
          • initState(vm)
          • initProvide(vm) // resolve provide after data/props
          • callHook(vm, 'created')
          • $mount()
    • state.js
      • initState:
        • initProps()
        • initMethods()
        • initData()
        • initWatch()
      • initData: observe(data)
      • stateMixin: Vue.prototype.$set
    • render.js
      • renderMixin:
        • Vue.prototype.$nextTick:
        • Vue.prototype._render: vm.$option.render()
  • core/observer
    • index.js
      • observe: new Observer()
      • Observer:
        • new: this.walk()
        • .walk: defineReactive()
      • defineReactive:
        • dep = new Dep()
        • Object.defineProperty()
          • set: dep.notify()
          • get: dep.depend()
    • dep.js
      • Dep
        • new: this.subs = []
        • .addSub: this.subs.push(sub)
        • .depend: Dep.target.addDep(this)
        • .notify: subs[i].update()
        • target
      • pushTarget:
      • popTarget:
    • watcher.js
      • Watcher
        • new:
          • this.getter = expOrFn:_update(_render)
          • this.get()
        • .get:
          • pushTarget()
          • this.getter()
          • popTarget()
        • .update: this.get()
        • .addDep: dep.addSub(this)
• Vue & Vue.prototype
• vm.*** = ***
• new Vue