vue源码解读系列：new Vue发生了什么？

[jiefancis]

vue如何实现数据驱动？

• 两条主线
  • dom：dom解析生成virtualdom虚拟dom
  • data：data数据双向绑定，跟dom挂钩。

vue整个流程

new Vue ---> init ---> $mount ---> compile ---> render ---> vnode ---> patch ----> DOM

• refernce

  • new Vue

  • src/core/instance/index 入口

  • init

  • src/core/instance/init ，初始化并调用vm.$mount执行挂载

    • initMixin ---> src/core/instance/init，定义vue原型方法_init
    • startMixin ---> instance/state，vm绑定$data/$props。定义vue原型属性$watch
    • eventsMixin ---> instance/events，vm原型定义$on/$emit/$once/$off。（组件的errorCaptured处理）
    • $on添加事件，$emit触发事件更新，并且触发组件实例的errorCaptured捕获异常。
    • lifecycleMixin在vue原型定义强制刷新和卸载的钩子。
    • renderMixin 在vue原型定义_render渲染钩子和$nextTick.

  • $mount

  • src/platforms/web/runtime/index 定义 Vue.prototype.$mount

  • src/platforms/web/entry-runtime-with-compiler重写$mount，实现compile解析html并生成render函数

  • compile

  • src\platforms\web\entry-runtime-with-compiler执行compileToFunctions

  • src/platforms/web/compiler/index创建解析createCompiler

  • src/compiler/index定义createCompiler函数调用parse解析

  • src/compiler/parser定义parse，解析template并返回root

  • render ：ast转化成code。

  • src/compiler/codegen。const code = generate(ast, options)，代码生成

  • src/compler/to-function.js 将render代码串转换成函数。new Function(arg1,arg2,functionBody)

  将template模板转化为render函数

  • patch
  • src/core/instance/lifeCycle文件，在mountComponent过程中，新建一个watcher，触发updateComponent进而实现vm.patch对新旧节点实现diff补丁。