主要相关文件:instance/index.js、instance/init.js、instance/state.js、instance/events.js、instance/lifecycle.js、instance/

  1. function Vue (options) {
  2. if (process.env.NODE_ENV !== 'production' &&
  3. !(this instanceof Vue)
  4. ) {
  5. warn('Vue is a constructor and should be called with the `new` keyword')
  6. }
  7. this._init(options)
  8. }
  9. initMixin(Vue)
  10. stateMixin(Vue)
  11. eventsMixin(Vue)
  12. lifecycleMixin(Vue)
  13. renderMixin(Vue)

initMixin

  1. 安装 Vue 初始化函数 _init

stateMinxin

  1. 设置 $data$props 的访问代理
    1. $data -> _data
    2. $props -> _props
  2. 安装数据相关的实例函数
    1. $set
    2. $delete
    3. $watch

eventMinxin

  1. 安装事件相关的实例方法
    1. $on
    2. $once
    3. $off
    4. $emit

lifecycleMixin

  1. 安装视图更新函数 _update
  2. 安装生命周期相关的实例方法
    1. $forceUpdate
    2. [$destroy](https://cn.vuejs.org/v2/api/#vm-destroy)

renderMixin

  1. 利用 installRenderHelpers 安装了运行时所需的工具函数

    1. Vue.prototype._o = markOnce
    2. Vue.prototype._n = toNumber
    3. Vue.prototype._s = toString
    4. Vue.prototype._l = renderList
    5. Vue.prototype._t = renderSlot
    6. Vue.prototype._q = looseEqual
    7. Vue.prototype._i = looseIndexOf
    8. Vue.prototype._m = renderStatic
    9. Vue.prototype._f = resolveFilter
    10. Vue.prototype._k = checkKeyCodes
    11. Vue.prototype._b = bindObjectProps
    12. Vue.prototype._v = createTextVNode
    13. Vue.prototype._e = createEmptyVNode
    14. Vue.prototype._u = resolveScopedSlots
    15. Vue.prototype._g = bindObjectListeners
  2. 安装渲染所需的实例函数

    1. $nextTick
    2. _render

总结

  1. // initMixin(Vue) src/core/instance/init.js **************************************************
  2. Vue.prototype._init = function (options?: Object) {}
  3. // stateMixin(Vue) src/core/instance/state.js **************************************************
  4. Vue.prototype.$data
  5. Vue.prototype.$props
  6. Vue.prototype.$set = set
  7. Vue.prototype.$delete = del
  8. Vue.prototype.$watch = function (
  9. expOrFn: string | Function,
  10. cb: any,
  11. options?: Object
  12. ): Function {}
  13. // eventsMixin(Vue) src/core/instance/events.js **************************************************
  14. Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {}
  15. Vue.prototype.$once = function (event: string, fn: Function): Component {}
  16. Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {}
  17. Vue.prototype.$emit = function (event: string): Component {}
  18. // lifecycleMixin(Vue) src/core/instance/lifecycle.js **************************************************
  19. Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}
  20. Vue.prototype.$forceUpdate = function () {}
  21. Vue.prototype.$destroy = function () {}
  22. // renderMixin(Vue) src/core/instance/render.js **************************************************
  23. // installRenderHelpers 函数中
  24. Vue.prototype._o = markOnce
  25. Vue.prototype._n = toNumber
  26. Vue.prototype._s = toString
  27. Vue.prototype._l = renderList
  28. Vue.prototype._t = renderSlot
  29. Vue.prototype._q = looseEqual
  30. Vue.prototype._i = looseIndexOf
  31. Vue.prototype._m = renderStatic
  32. Vue.prototype._f = resolveFilter
  33. Vue.prototype._k = checkKeyCodes
  34. Vue.prototype._b = bindObjectProps
  35. Vue.prototype._v = createTextVNode
  36. Vue.prototype._e = createEmptyVNode
  37. Vue.prototype._u = resolveScopedSlots
  38. Vue.prototype._g = bindObjectListeners
  39. Vue.prototype.$nextTick = function (fn: Function) {}
  40. Vue.prototype._render = function (): VNode {}
  41. // core/index.js 文件中
  42. Object.defineProperty(Vue.prototype, '$isServer', {
  43. get: isServerRendering
  44. })
  45. Object.defineProperty(Vue.prototype, '$ssrContext', {
  46. get () {
  47. /* istanbul ignore next */
  48. return this.$vnode && this.$vnode.ssrContext
  49. }
  50. })
  51. // 在 runtime/index.js 文件中
  52. Vue.prototype.__patch__ = inBrowser ? patch : noop
  53. Vue.prototype.$mount = function (
  54. el?: string | Element,
  55. hydrating?: boolean
  56. ): Component {
  57. el = el && inBrowser ? query(el) : undefined
  58. return mountComponent(this, el, hydrating)
  59. }
  60. // 在入口文件 entry-runtime-with-compiler.js 中重写了 Vue.prototype.$mount 方法
  61. Vue.prototype.$mount = function (
  62. el?: string | Element,
  63. hydrating?: boolean
  64. ): Component {
  65. // ... 函数体
  66. }