创建Vue类的过程

原创
2019/12/20 15:43
阅读数 66

1.构造函数

// src/core/instance/index.js
//构造函数
function Vue (options) {
  ...
  this._init(options)
}

2.全局配置对象

// src/core/global-api/index.js
//全局config对象,我们几乎不会用到
import config from '../config'
Vue.config = {
  keyCodes,
  // LIFECYCLE_HOOKS in src/shared/constants.js
  _lifecycleHooks: ['beforeCreate', 'created', ...]
}

3.默认options配置

// src/core/global-api/index.js
// 默认的options配置,我们每个组件都会继承这个配置。
Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
  Vue.options[type + 's'] = Object.create(null)
})
Vue.options._base = Vue
extend(Vue.options.components, builtInComponents)

// 最后的结果:
Vue.options = {
  beforeCreate, // 比如 vue-router 就会注册这个回调,因此会每一个组件继承
  components, // 前面提到了,默认组件有三个 `KeepAlive`,`transition`, `transitionGroup`,这里注册的组件就是全局组件,因为任何一个组件中不用声明就能用了。所以全局组件的原理就是这么简单
  directives, // 默认只有 `v-show` 和 `v-model`
  filters // 不推荐使用了
}

4.一些全局方法

// src/core/global-api/index.js
Vue.component // 注册组件
Vue.directive // 注册指令
Vue.set = set// 添加全局方法 数据的修改操作
Vue.delete = del
Vue.nextTick = nextTick // 添加全局方法 Vue.nextTick 下一个tick执行函数
initUse(Vue)// 添加全局方法 Vue.use 注册插件
initMixin(Vue)// 添加全局方法 Vue.mixin 混入mixin用的
initExtend(Vue)
initAssetRegisters(Vue)

5.Vue.prototype 上不同作用的方法

// src/core/instance/index.js
initMixin(Vue)// 添加的 _init 方法,是Vue实例初始化的入口方法,会调用其他的功能初始化函数
stateMixin(Vue)// 添加的三个用来进行数据操作的方法 data,props,watch
eventsMixin(Vue)// 添加的事件方法 on,off,one,emit
lifecycleMixin(Vue)// 添加的生命周期相关的方法 _update,$forceUpdate,$destroy
renderMixin(Vue)// 添加的 $nextTick,_render和一堆renderHelper
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部