Skip to content

2new Vue

src/core/instance/index.js

js
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只能通过new关键字初始化,然后会调用 this._init()方法,

js
Vue.prototype._init = function(options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  let startTag, endTag
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    startTag = `vue-perf-start:${vm._uid}`
    endTag = `vue-perf-end:${vm._uid}`
    mark(startTag)
  }

  // a flag to avoid this being observed
  vm._isVue = true
  // merge options
  if (options && options._isComponent) {
    // 优化内部组件实例化,因为动态选项合并非常慢,并且没有一个内部组件选项需要特殊处理
    initInternalComponent(vm, options)
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
  }
}

Vue初始化主要就干了几件事:

  • 合并配置
  • 初始化生命周期
  • 初始化事件中心
  • 初始化渲染
  • 初始化data、props、computed、watcher等等

总结

Vue的初始化逻辑很清楚,把不同的功能逻辑拆成一个单独的函数执行,主线逻辑一目了然,这样的编程思想非常值得学习和借鉴。

js
function test() {
  return () => {
    return () => {

    }
  }
}

共 20 个模块,1301 篇 Markdown 文档。