vue源码解读-组织函数

2023年5月3日 282次阅读 来源: wolfzwz

src/core/instance/index.js
此文件重要完成了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
    原文作者：wolfzwz
    原文地址: https://segmentfault.com/a/1190000017080309
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞