vue源码解读-构造函数

2024年4月8日 144次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞