美文网首页
vue源码心得--Vue对象生成方式(混入)

vue源码心得--Vue对象生成方式(混入)

作者: 某时橙 | 来源:发表于2020-11-12 13:22 被阅读0次

part1.源码部分

//位置src\core\instance\index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

这里的Vue对象实际上就是通过Vue构造函数实现,即:

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

为何 Vue 不用 ES6 的 Class 去实现呢?我们往后看这里有很多 xxxMixin 的函数调用,并把 Vue 当参数传入,它们的功能都是给 Vue 的 prototype 上扩展一些方法(这里具体的细节会在之后的文章介绍,这里不展开),Vue 按功能把这些扩展分散到多个模块中去实现,而不是在一个模块里实现所有,这种方式是用 Class 难以实现的。这么做的好处是非常方便代码的维护和管理。

part2.模块实现

function Warlock(){
 this._init({
   name:'warlock',
   year:'21',
 })
}
function initObj(obj){
  obj.prototype._init=function(option){
    this.name=option.name;
    this.year=option.year;
  }
}
initObj(Warlock)
let obj=new Warlock();

warlock对象的init的方法就通过下面的initObj“混入”,
现在打开F12,复制上段代码并复制控制台之,运行,看看obj的结果


obj

这就是vue的通过混入的模块管理方式,非常值得我们学习!

相关文章

  • vue源码心得--Vue对象生成方式(混入)

    part1.源码部分 这里的Vue对象实际上就是通过Vue构造函数实现,即: 为何 Vue 不用 ES6 的 Cl...

  • Vue混入

    Vue 混入 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组...

  • Vue混入mixins

    Vue官网上介绍: 混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任...

  • 第二十六节:Vue选项:Vue混入对象

    Vue混入的认识: 混入是一种代码的组织方式, 可以在多个组件间横向复用代码. 定义混入对象,只要将混入对象添加到...

  • 12 Mixins

    混入(mixins)是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项当组件使用混入对象...

  • vue 混入-19

    什么是混入 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件...

  • vue mixin

    混入 mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象...

  • vue中mixins的使用方法和注意点

    mixins基础概况 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以...

  • 混入 mixin

    混入提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象...

  • VUE复习笔记19(混入)

    混入 基础 混入(mixins)是一种分发 vue 组件可复用功能中一种特别灵活的方式。混入对象可以包含任意的选项...

网友评论

      本文标题:vue源码心得--Vue对象生成方式(混入)

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