vue源码解析(上) vue初始化流程

搭建调试环境

• 克隆一份源码,地址如下: https://github.com/vuejs/vue.git
• 安装依赖 npm install 或者yarn
  安装到phantom.js即可终止(耗费时间较长)
• 安装rollup: npm i -g rollup
• 修改dev脚本: 添加 --sourcemap
• 执行dev脚本: npm run dev
  当npm run dev 命令跑完了之后, dist目录下会生成一个vue.js.map的文件, 该map文件在调试的时候可以可源码产生映射关系.方便我们调试

调试技巧

打开浏览器的Sources,进行断点调试

• 打开指定文件: ctrl + p
• 断点调试
• 单步执行: F10
• 进入函数中: F11
• 查看调用栈(Call stack)
• 定位源文件所在位置: 右键出现Reveal in sidebar (可以在侧边栏中找到源文件的位置)

术语解释

• runtime: 仅包含运行时,不包含编译器
• common: cjs规范,用于webpack1
• esm: ES模块,用于webpack2+
• umd: universal module definition, 兼容sjs和amd,用于浏览器

入口

dev脚本中 -c scripts/config.js 指明配置⽂件所在
参数 TARGET:web-full-dev 指明输出⽂件配置项

// Runtime+compiler development build (Browser)
  // web的完整版本整体配置
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),  // 入口文件
    dest: resolve('dist/vue.js'), // 目标文件
    format: 'umd', // 输出规范
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },

初始化流程

⼊⼝ platforms/web/entry-runtime-with-compiler.js

扩展默认$mount⽅法：处理template或el选项,解析模板,编译之后得到渲染函数

platforms/web/runtime/index.js

• 安装了平台特有的 patch 函数
• 实现了$mount

core/index.js

• 实现了全局方法的初始化

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'

// 初始化全局API
initGlobalAPI(Vue)
.....

src/core/instance/index.js

这个文件下面找到了

• vue的构造函数
• 实现了众多的实例属性和方法
  • src/core/instance/init.js: 实现了init

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

// vue构造函数
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  // 执行了一个初始化方法
  this._init(options)
}

initMixin(Vue) // 扩展了一个_init方法
stateMixin(Vue) // $data/$props/$set
eventsMixin(Vue) // $on/$emit/$once/$off
lifecycleMixin(Vue) // _update/$forceUpdate/$destroy
renderMixin(Vue) // $nextTick/_render

export default Vue

src/core/instance/init.js

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    // vue实例
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    // 合并选项
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    // 各种初始化操作
    vm._self = vm
    initLifecycle(vm) // $parent / $root 初始化
    initEvents(vm) // 事件监听, 自定义事件(组件级别的)
    initRender(vm) // $slots/ $createElement 
    callHook(vm, 'beforeCreate')
    // 获取祖辈注入的数据
    initInjections(vm) // resolve injections before data/props
    initState(vm) // 数据状态的初始化: data/props/methods/computed/watch
    // 给后代提供数据
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    // 渲染里面如有有el,自动执行$mount
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

总结一下整体初始化流程
new Vue() => _init() => $mount() => mountComponent() => updateComponent()/new Watcher() => render() => _update()

数据响应式

Vue⼀⼤特点是数据响应式，数据的变化会作⽤于UI⽽不⽤进⾏DOM操作。原理上来讲，是利⽤了JS语
⾔特性Object.defineProperty()，通过定义对象属性setter⽅法拦截对象属性变更，从⽽将数值的变化
转换为UI的变化。
具体实现是在Vue初始化时，会调⽤initState，它会初始化data，props等，这⾥着重关注data初始化，

整体流程

initState (vm: Component) src\core\instance\state.js
初始化数据，包括props、methods、data、computed和watch 等等

initData核⼼代码是将data数据响应化

function initData (vm: Component) {
// 执⾏数据响应化
observe(data, true /* asRootData */) }

core/observer/index.js

observe⽅法返回⼀个Observer实例

core/observer/index.js

Observer对象根据数据类型执⾏对应的响应化操作
defineReactive定义对象属性的getter/setter，getter负责添加依赖，setter负责通知更新

core/observer/dep.js

Dep负责管理⼀组Watcher，包括watcher实例的增删及通知更新

Watcher

Watcher解析⼀个表达式并收集依赖，当数值变化时触发回调函数，常⽤于$watch API和指令中。
每个组件也会有对应的Watcher，数值变化会触发其update函数导致重新渲染

export default class Watcher {
    constructor () {}
    get () {}
    addDep (dep: Dep) {}
    update () {}
}

数组响应化

数组数据变化的侦测跟对象不同，我们操作数组通常使⽤push、pop、splice等⽅法，此时没有办法得知数据变化。所以vue中采取的策略是拦截这些⽅法并通知dep。

src\core\observer\array.js

为数组原型中的7个可以改变内容的⽅法定义拦截器

Observer中覆盖数组原型

if (Array.isArray(value)) {
	// 替换数组原型
	protoAugment(value, arrayMethods) // value.__proto__ = arrayMethods
	this.observeArray(value)
}