美文网首页前端
Vue2.0 源码分析笔记(二)Vue 构造函数整理-原型

Vue2.0 源码分析笔记(二)Vue 构造函数整理-原型

作者: 若年 | 来源:发表于2021-07-13 10:43 被阅读0次

    执行vue run dev 命令时会按照下边的顺序执行如下代码,这些文件分布在不同的文件中,整理出来方便查阅。

    // initMixin(Vue)    src/core/instance/init.js **************************************************
    Vue.prototype._init = function (options?: Object) {}
    
    // stateMixin(Vue)    src/core/instance/state.js **************************************************
    Vue.prototype.$data
    Vue.prototype.$props
    Vue.prototype.$set = set
    Vue.prototype.$delete = del
    Vue.prototype.$watch = function (
      expOrFn: string | Function,
      cb: any,
      options?: Object
    ): Function {}
    
    // eventsMixin(Vue)    src/core/instance/events.js **************************************************
    Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {}
    Vue.prototype.$once = function (event: string, fn: Function): Component {}
    Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {}
    Vue.prototype.$emit = function (event: string): Component {}
    
    // lifecycleMixin(Vue)    src/core/instance/lifecycle.js **************************************************
    Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}
    Vue.prototype.$forceUpdate = function () {}
    Vue.prototype.$destroy = function () {}
    
    // renderMixin(Vue)    src/core/instance/render.js **************************************************
    // installRenderHelpers 函数中
    Vue.prototype._o = markOnce
    Vue.prototype._n = toNumber
    Vue.prototype._s = toString
    Vue.prototype._l = renderList
    Vue.prototype._t = renderSlot
    Vue.prototype._q = looseEqual
    Vue.prototype._i = looseIndexOf
    Vue.prototype._m = renderStatic
    Vue.prototype._f = resolveFilter
    Vue.prototype._k = checkKeyCodes
    Vue.prototype._b = bindObjectProps
    Vue.prototype._v = createTextVNode
    Vue.prototype._e = createEmptyVNode
    Vue.prototype._u = resolveScopedSlots
    Vue.prototype._g = bindObjectListeners
    Vue.prototype.$nextTick = function (fn: Function) {}
    Vue.prototype._render = function (): VNode {}
    
    // core/index.js 文件中
    Object.defineProperty(Vue.prototype, '$isServer', {
      get: isServerRendering
    })
    
    Object.defineProperty(Vue.prototype, '$ssrContext', {
      get () {
        /* istanbul ignore next */
        return this.$vnode && this.$vnode.ssrContext
      }
    })
    
    // 在 runtime/index.js 文件中
    Vue.prototype.__patch__ = inBrowser ? patch : noop
    Vue.prototype.$mount = function (
      el?: string | Element,
      hydrating?: boolean
    ): Component {
      el = el && inBrowser ? query(el) : undefined
      return mountComponent(this, el, hydrating)
    }
    
    // 在入口文件 entry-runtime-with-compiler.js 中重写了 Vue.prototype.$mount 方法
    Vue.prototype.$mount = function (
      el?: string | Element,
      hydrating?: boolean
    ): Component {
      // ... 函数体
    }
    

    相关文章

      网友评论

        本文标题:Vue2.0 源码分析笔记(二)Vue 构造函数整理-原型

        本文链接:https://www.haomeiwen.com/subject/toijpltx.html