vue源码为什么vue是一个方法而不是一个calss类

Posted 2021-07-16 qq_27449993

// 引入模块
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'
// 什么时候需要把代码放到util包呢，个人感觉如果代码能够复用而且脱离项目能够应用到另一个项目可以考虑放到util
/*
    构造函数 大家在这里可能会觉得，既然选择打包工具，那为啥不选择class呢，应该是和后边需要定义Vue静态方法和属性有关，
    es6语法暂不支持对静态属性的定义
*/
function Vue (options) {
  // this instanceof Vue 可以判断函数是不是 new关键字调用
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    // 封装好的警告方法 console.warn();
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  // 调用初始化方法
  this._init(options)
}

/* 
  Mixin 混入的意思在这里大家可以理解成扩展
  以下方法在vue prototype 中扩展方法
  这里通过不同的函数来给vue prototye添加不同的功能,
  这种代码拆分思想很值得借鉴，尤其是在写复杂逻辑，
  将复杂逻辑拆分成不同的功能，这样代码清晰方便维护
*/
// Vue 初始化 简言之就是 合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 
initMixin(Vue)
// 在这里state可以理解为 在vue原型vue.prototype扩展了vue实例中$date,$props,$set,$delete,$watch
stateMixin(Vue)
// 对事件的扩展 包括$on,$once,$emit,$off 应用的设计模式为观察者模式
eventsMixin(Vue)
/* 
扩展生命周期方法
Vue.prototype._update 
Vue.prototype.$forceUpdate 强制更新
Vue.prototype.$destroy  销毁
*/
lifecycleMixin(Vue)
/* 
Vue.prototype.$nextTick = function (fn: Function) {}
Vue.prototype._render = function (): VNode {}
*/
renderMixin(Vue)

export default Vue

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