Vue源码学习(二)——从宏观看Vue

上一篇文章我们写到从入口文件一步步找到Vue的构造函数,现在我们要去看看Vue实例化经历的过程

Vue的构造函数

我们知道Vue的构造函数在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue源码学习笔记一。那我们关注一下Vue的构造函数的内容:

// src/core/instance/index.js

import { initMixin } from './init'

// Vue的构造函数
function Vue (options) {
  //... 验证环境
  this._init(options)
}

// 在Vue原型上绑定实例方法
initMixin(Vue)  // init
stateMixin(Vue)  // $set $delete $watch
eventsMixin(Vue)  // $on $once $off $emit
lifecycleMixin(Vue)  // _update $forceUpdate $destroy
renderMixin(Vue)  // $nextTick _render

添加Vue属性和方法

这边我们可以看到Vue的构造函数中执行了init方法,从下方得知init是在src\core\instance\init.js中导出的initMixin函数中定义的

initMixin

  1. vmthis ,同时为实例添加一个唯一的uidvm._isVue = true 监听对象变化时用于过滤vm,因为Vue的实例是不需要监听变化的。
// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
 const vm: Component = this

  // 当前实例添加了一个唯一的uid
  vm._uid = uid++   

  // ...

  // 监听对象变化时用于过滤vm
  vm._isVue = true
  
  //...
  }
  1. 参数处理,根据我们的小栗子,我们的options处理直接进入了else,然后对参数进行合并,这里是对vue extend的参数需要进行合并处理,我们这里resolveConstructorOptions返回的即是constructor.options本身
  2. 生命周期相关变量初始化 initLifecycle(vm)
 // src\core\instance\lifecycle.js
 
 // 为组件挂载相应属性,并初始化
  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false

4.vm 事件监听初始化 initEvents()

// src/core/instance/events.js
export function initEvents (vm: Component) {
  // 创建事件对象,用于存储事件
  vm._events = Object.create(null)
  // 系统事件标识位
  vm._hasHookEvent = false
  
  // init parent attached events npm 
  // 将父组件模板中注册的事件放到当前组件实例的listeners
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm)  

  //  vm状态初始化,prop/data/computed/method/watch都在这里初始化完成,vue实例create的关键
  initState(vm)
  initProvide(vm)  
  callHook(vm, 'created')

stateMixin

Vue实例方法--数据,该文件对应的是Vue的数据的处理,首先对data进行挂载,然后设置数据`set、删除数据delete`、观测数据`watch`方法挂载

// stateMixin(Vue)  src/core/instance/state.js
export function stateMixin (Vue: Class<Component>) {
  // data
  const dataDef = {}
  dataDef.get = function () { return this._data }
  // prop
  const propsDef = {}
  propsDef.get = function () { return this._props }

  // ...

  // 定义$data & prop属性
  Object.defineProperty(Vue.prototype, '$data', dataDef)
  Object.defineProperty(Vue.prototype, '$props', propsDef)

  // 原型链添加函数set 和 delete
  Vue.prototype.$set = set
  Vue.prototype.$delete = del

  // 原型链添加函数$watch
  Vue.prototype.$watch = function (){
    // ...
  }
}

eventsMixin

Vue实例方法--事件,该文件主要挂载Vue实例方法的事件,监听事件on once、移除事件off、触发事件emit的挂载

// eventsMixin(Vue) src/core/instance/events.js
export function eventsMixin (Vue: Class<Component>) {
  Vue.prototype.$on = function (event: string, fn: Function): Component {
    // ...
  } 
  Vue.prototype.$once = function (event: string, fn: Function): Component {
    // ...
  }
  Vue.prototype.$off = function (event?: string, fn?: Function): Component {
    // ...
  }
  Vue.prototype.$emit = function (event: string): Component {
    // ...
  }
}

lifecycleMixin

Vue实例方法--生命周期,,该文件主要挂载Vue实例方法中的生命周期方法,重新渲染$forceUpdate()、销毁实例$destroy()

// lifecycleMixin(Vue)  src/core/instance/lifecycle.js
Vue.prototype._mount = function(){}
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}
Vue.prototype._updateFromParent = function(){}
Vue.prototype.$forceUpdate = function () {}
Vue.prototype.$destroy = function () {}

renderMixin

文件主要挂载Vue实例方法中的dom更新回调$nextTick及一些其他的render函数,后续我们再的深挖一下

// renderMixin(Vue) src/core/instance/render.js
Vue.prototype.$nextTick = function (fn: Function) {}
Vue.prototype._render = function (): VNode {}
Vue.prototype._s = _toString
Vue.prototype._v = createTextVNode
Vue.prototype._n = toNumber
Vue.prototype._e = createEmptyVNode
Vue.prototype._q = looseEqual
Vue.prototype._i = looseIndexOf
Vue.prototype._m = function(){}
Vue.prototype._o = function(){}
Vue.prototype._f = function resolveFilter (id) {}
Vue.prototype._l = function(){}
Vue.prototype._t = function(){}
Vue.prototype._b = function(){}
Vue.prototype._k = function(){}

全局API

上面部分,我们对Vue的构造函数,在src/core/instance/index.js文件中的作用进行了大体的了解,当然这并没有结束,依据我们Vue源码学习笔记一中提到的,我们追溯到上一级src/core/index.js

// src/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'

// 初始化全局变量
initGlobalAPI(Vue)

// 为vue原型定义属性 isServer  判断是否为服务端渲染
Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})

// 为vue原型定义属性 ssrContext
Object.defineProperty(Vue.prototype, '$ssrContext', {
  get () {
    /* istanbul ignore next */
    return this.$vnode && this.$vnode.ssrContext
  }
})

Object.defineProperty(Vue, 'FunctionalRenderContext', {
  value: FunctionalRenderContext
})

Vue.version = '__VERSION__'

export default Vue

initGlobalAPI(Vue)

在Vue 构造函数上挂载静态属性和方法即全局API

// src/core/global-api/index.js

export function initGlobalAPI(Vue: GlobalAPI) {
  const configDef = {}
  configDef.get = () => config
  // ...
  Object.defineProperty(Vue, 'config', configDef)
  
  Vue.util = { // Vue.util
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  Vue.options._base = Vue

  extend(Vue.options.components, builtInComponents)
  
  initUse(Vue)   // Vue.use

  initMixin(Vue)  // Vue.mixin

  initExtend(Vue) // Vue.extend
  
  initAssetRegisters(Vue) // Vue.component Vue.directive Vue.filter
}

内置组件&命令

在追溯到上一级,在文件src/platforms/web/runtime/index.js,该文件注册了一些 Vue内置的组件:包裹动态组件KeepAlive、元素过渡效果Transition、多个元素过渡TransitionGroup

// src/platforms/web/runtime/index.js 执行后

// 安装平台特定的utils
Vue.config.isUnknownElement = isUnknownElement
Vue.config.isReservedTag = isReservedTag
Vue.config.getTagNamespace = getTagNamespace
Vue.config.mustUseProp = mustUseProp
// 安装平台特定的 指令 和 组件
Vue.options = {
    components: {
        KeepAlive,
        Transition,
        TransitionGroup
    },
    directives: {
        model,
        show
    },
    filters: {},
    _base: Vue
}
Vue.prototype.__patch__
Vue.prototype.$mount

compiler编译器添加

再上一级为src/platforms/web/entry-runtime-with-compiler.js,该文件对原来的Vue.prototype.$mount进行覆盖定义,并且在Vue上挂载了 compile。给Vue的 $mount 方法添加 compiler 编译器,支持 template。

// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount

// ...
 
Vue.prototype.$mount = function (){

//... 覆盖 Vue.prototype.$mount
}

// ...

//在 Vue 上挂载 compile 
//compileToFunctions 函数的作用,就是将模板 template 编译为render函数。
Vue.compile = compileToFunctions

总结

至此的话我们从宏观上过了一下从我们一层层找到vue到一层层往外看到对Vue的添加属性方法等,我们有了一个整体的概念

  1. src/core/instance/index.js vue的构造函数,添加Vue属性和方法
  2. src/core/index.js 全局API的挂载
  3. src/platforms/web/runtime/index.js 主要是添加web平台特有的配置、组件和指令
  4. web/entry-runtime-with-compiler.js 给Vue的 $mount 方法添加 compiler 编译器,支持 template
  5. scripts/config.js 编译入口文件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容