vue源码解读-构造函数

src/core/instance/index.js
此文件主要实现了Vue初始化vue

// 引入模块
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
相关文章
相关标签/搜索