美文网首页前端
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 构造函数整理-原型

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

  • Vue2.0 源码分析笔记(三)Vue 构造函数整理-全局API

  • 2021-04-15

    Js构造函数、原型、原型链整理 1,普通函数、构造函数区别: 1,名字: 构造函数首字母建议大写,普通函数首字母建...

  • js 集成模式 07-24

    **原始继承模式--原型链 2:借用构造函数 3:共享构造原型 4:圣杯模式**一:原型链; 二:构造函数; 三:...

  • Vue2 源码学习

    Vue2 源码分析 基于 Vue 2.6.10 版本vue2.0 在实现“响应数据绑定”的同时引入了 virtua...

  • vue响应式原理

    参考: vue2.0源码分析之理解响应式架构](https://segmentfault.com/a/11900...

  • js面向对象的几种写法

    一、工厂模式 二、构造函数模式 三、原型模式 四、组合使用构造函数和原型模式 五、原型链继承 六、借用构造函数继承...

  • javascirpt复习

    实例中访问构造函数原型的指针,指向的是构造函数原型,不是构造函数; 所以重写构造函数原型对象,【实例对象】访问还是...

  • vue.js源码学习笔记

    参考:vue.js官网Vue.js 源码学习笔记Vue2.0源代码阅读 文件结构梳理 整体目录 源代码实现目录 模...

  • new Vue的具体流程

    new Vue做了啥? 打开源码,先找到Vue的构造函数,在vue/src/core/instance/index...

网友评论

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

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