Vue源码(一)

Vue

走core/index.js 核心代码
走 import Vue from ‘./instance/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)
}

初始化的Vue构造函数,啥都没有
主要就做了一件事,检测Vue是否被new,有无实例产生
然后是_init,这个实例不存在这个方法,所以应该在原型链上
下面有一个initMixin(Vue),走import { initMixin } from ‘./init’

在原型链上添加_init

Vue.prototype._init = "函数代码"

vm._uid = uid++;//在_init函数中调用
//uid是闭包变量,定义在init.js模块全局中

performance 开发环境和浏览器下且存在performance API,可以使用performance API进行性能记录
window.performance.getEntriesByType(‘mark’) 查看历史记录

vm._isVue = true
添加vue标识

//判断是否是组件,不是的话,就是整体实例化
vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor),//解析构造函数的配置项
  options || {},
  vm
)

//非生产环境已经开始使用Proxy了
if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
//带一个自身属性
vm._self = vm

//初始化生命周期
initLifecycle(vm)
//初始化事件
initEvents(vm)
//初始化渲染
initRender(vm)
//触发创建前生命周期
callHook(vm, 'beforeCreate')
//注入(react简化版上下文)
initInjections(vm)
//初始化data/props/methods/computed/watch
initState(vm)
//提供子属性变量注入
initProvide(vm)
//触发创建成功生命周期
callHook(vm, 'created')

在创建前 初始化了生命周期/初始化事件/初始化渲染
在创建完成前初始化了注入,变量和方法,向子元素注入

//如果配置了el,则挂载到页面
if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}