vue2.x源码导读

dist目录输出文件说明

• cjs webpack1，browserfiry
• esm webpack2+
• umd 兼容cjs和amd
• runtime 仅仅包含运行时代码，不包含编译器

环境准备

• 1、安装依赖：npm install
• 2、安装打包工具rollup：npm install rollup -g

入口文件

src\platforms\web\entry-runtime-with-compiler.js

• 扩展了核心的$mount方法：
• 处理template和el选项 选项顺序：render>template>el
• 尝试将模板编译成render函数

src\platforms\web\runtime\index.js

• 定义$mount方法，执行挂载mountComponent(this, el, hydrating)

• 实现了__patch__方法：将来虚拟dom的diff操作入口

src\core\index.js

• 定义全局API：initGlobalAPI(Vue)

• src\core\global-api\index.js

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick
  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
  

src\core\instance\index.js

构造函数的定义：

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  )
  // 初始化
  this._init(options)
}
initMixin(Vue) // 实现了_init()
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

src\core\instance\init.js

• 初始化函数的定义

initLifecycle(vm) // $parent,$root,$children,$ref的初始化
initEvents(vm) // 处理父组件传递的监听器
initRender(vm)  // $slots,$scopedSlots,_c(),$createElement()
callHook(vm, 'beforeCreate')
initInjections(vm) // 获取注入的数据（先获取父给的数据）
initState(vm) // 初始化组件中的props、methods、data、computed、watch
initProvide(vm) // 提供数据（将父给的数据和自己的数据统一提供给后代）
callHook(vm, 'created')

数据响应式

src/core/instance/state.js

数据初始化

if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }

initData（）调用Observe，判断data属性与props属性、方法名的重复

observe(data, true /* asRootData */)

src/core/observer/index.js

返回一个Observer实例

ob = new Observer(value)

Observer类：判断数据对象的类型，做相应的处理

defineReactive（）给data中每一个key做数据劫持进行响应化处理

src/core/observer/dep.js

维护和管理若干Watcher

src/core/observer/watcher.js

维护和管理若干Dep

src/core/observer/array.js

数组响应化处理