当前位置:首页> 正文

1-Vue构造函数的生成

1-Vue构造函数的生成

版本:@2.6.10

环境:web ;

思维图:www.processon.com/view/link/5…

我们使用的Vue是一个经过层层加强的构造函数,

①在src/core/instance/index.js中的增强:

initMixin(Vue)//增加 Vue.prototype._init()函数stateMixin(Vue)//Vue.prototype.$data//Vue.prototype.$props//Vue.prototype.$set//Vue.prototype.$delete//Vue.prototype.$watcheventsMixin(Vue)//Vue.prototype.$on//Vue.prototype.$once//Vue.prototype.$off//Vue.prototype.$emitlifecycleMixin(Vue)//Vue.prototype._update//Vue.prototype.$forceUpdate//Vue.prototype.$destroyrenderMixin(Vue)//Vue.prototype.$nextTick//Vue.prototype._render// 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._d = bindDynamicKeys        // Vue.prototype._p = prependModifier

②src/core/index.js

Vue.config//配置所在位置:src/core/config.jsVue.util = {    warn,    extend,    mergeOptions,    defineReactive  }  Vue.set = set  Vue.delete = del  Vue.nextTick = nextTick  Vue.observable  Vue.options = {  components:{ KeepAlive },   //内置组件KeepAlive  directives:{},  filters:{}  }  Vue.options._base = Vue  Vue.use  Vue.mixin  Vue.component=function   //定义组件  Vue.directives=function  //定义指令  Vue.filters=function     //定义过滤器  Vue.prototype.$isServer     Vue.prototype.$ssrContext  Vue.protottype.FunctionalRenderContext  Vue.version = 2.6.10

③ src/platforms/web/runtime/index.js

加入web平台属性配置:Vue.config.mustUseProp = mustUsePropVue.config.isReservedTag = isReservedTag  //保留标签Vue.config.isReservedAttr = isReservedAttr //保留属性Vue.config.getTagNamespace = getTagNamespace //命名空间Vue.config.isUnknownElement = isUnknownElement 指令:  Vue.options = {  components:{ KeepAlive, Transition,TransitionGroup }, //加入Transition,TransitionGroup  directives:{model, show}, //加入model, show  filters:{}  }原型:  Vue.prototype.__patch__ = patch  Vue.prototype.$mount

④src/platforms/web/entry-runtime-with-compiler.js

const mount = Vue.prototype.$mount //缓存公用mountVue.prototype.$mount               //加入平台mountVue.compile = compileToFunctions   加入属性

经过各种函数的添加。最终获得的Vue构造函数:

function Vue (options) {    if (      !(this instanceof Vue)    ) {      warn('Vue is a constructor and should be called with the `new` keyword');    }    this._init(options);  }Vue.configVue.util ={    warn,    extend,    mergeOptions,    defineReactive,}Vue.setVue.deleteVue.nextTickVue.observableVue.options = {    components:{KeepAlive, Transition, TransitionGroup},    directive:{model, show},    filter:{},    _base :Vue}Vue.useVue.mixinVue.extendVue.componentVue.directiveVue.filterVue.compileVue.prototype = {    _init$data$props$set$delete$watch$on    $once$off$emit_update$forceUpdate    $destroy    __patch__    $mount    $nextTick    _render    _o = markOnce;    _n = toNumber;    _s = toString;    _l = renderList;    _t = renderSlot;    _q = looseEqual;    _i = looseIndexOf;    _m = renderStatic;    _f = resolveFilter;    _k = checkKeyCodes;    _b = bindObjectProps;    _v = createTextVNode;    _e = createEmptyVNode;    _u = resolveScopedSlots;    _g = bindObjectListeners;    _d = bindDynamicKeys;    _p = prependModifier;}

以上内容就是Vue@2.6.10构造函数的全部属性。

展开全文阅读

相关内容