Vue源码学习之初始化模块init.js解析


Posted in Javascript onNovember 02, 2017

我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是使用了JavaScript原型继承的原理,在Vue的原型上面增加属性和方法。我们继续跟着this._init(options)走,这个一点击进去就知道了是进入了init.js文件是在initMixin函数里面给Vue原型添加的_init方法。首先来从宏观看看这个init文件,可以看出主要是导出了两个函数:initMixin和resolveConstructorOptions,具体作用我们一步步来讨论。咋的一看这个文件,可能有些童鞋会看不明白函数参数括号里面写的是什么鬼,这个其实是应用了flow的类型检查,具体flow的使用这里就不介绍了,有兴趣的请移步:https://flow.org/en/

我们现在来看第一个函数initMixin,Vue实例在初始化的时候就调用了这个函数,

let uid = 0

export function initMixin (Vue: Class<Component>) {
 Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  let startTag, endTag
  /* istanbul ignore if */  【**注:istanbul 是代码覆盖率检测工具,此注释为代码测试用**】
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
   startTag = `vue-perf-init:${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) {
   // optimize internal component instantiation
   // since dynamic options merging is pretty slow, and none of the
   // internal component options needs special treatment.
   initInternalComponent(vm, options)
  } else {
   vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   )
  }
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
   initProxy(vm)
  } else {
   vm._renderProxy = vm
  }
  // expose real self
  vm._self = vm
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')

  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
   vm._name = formatComponentName(vm, false)
   mark(endTag)
   measure(`${vm._name} init`, startTag, endTag)
  }

  if (vm.$options.el) {
   vm.$mount(vm.$options.el)
  }
 }
}

我们本着宏观简化原则,这个函数里面前面有三个if判断工作我们可以先不细化讨论,大致第一个是用performance做性能监测,第二个合并option,第三个是做代理拦截,是ES6新特性,可参考阮一峰大神关于proxy的介绍【http://es6.ruanyifeng.com/#docs/proxy】。那么就进入了初始化函数主要点:

initLifecycle(vm) //生命周期变量初始化
initEvents(vm) //事件监听初始化
initRender(vm) //初始化渲染
callHook(vm, 'beforeCreate')  //回调钩子beforeCreate
initInjections(vm) //初始化注入
initState(vm)  // prop/data/computed/method/watch状态初始化
initProvide(vm)   // resolve provide after data/props
callHook(vm, 'created')   //回调钩子created
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 vm._name = formatComponentName(vm, false)
 mark(endTag)
 measure(`${vm._name} init`, startTag, endTag)
}

if (vm.$options.el) {
 vm.$mount(vm.$options.el)
}

这里来一个插曲start

V2.1.8及以前的版本】这里比较方便理解在生命周期created之后再做render,那么在created之前就无法获取DOM。这也是在有些源码解析文章里面很容易见到的分析,也是正确的

initLifecycle(vm)
initEvents(vm)
callHook(vm, 'beforeCreate')
initState(vm)
callHook(vm, 'created')
initRender(vm)

v2.1.9及以后的版本】但到这里一开始就懵逼了很久render提到beforeCreate之前去了,那岂不是DOM在beforeCreate之前就能获取到了?显然不对了,请注意render虽然提前了,但是后面多了一个if这个if里面才获取DOM的关键,这个if在2.1.8版本之前是在render函数里面的,在2.1.9之后被提出来,然后render函数提前了,至于为何提前暂未了解,此处只是踩了一个看其他源码解析不同版本带来的坑!

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initState(vm)
callHook(vm, 'created')
if (vm.$options.el) {
 vm.$mount(vm.$options.el)
}

插曲end,继续

1.initLifecycle

function initLifecycle (vm: Component) {
 const options = vm.$options

 // locate first non-abstract parent
 let parent = options.parent  //我理解为父实例或者父组件
 if (parent && !options.abstract) {  //例子中没有parent,断点代码的时候自动跳过
  while (parent.$options.abstract && parent.$parent) {
   parent = parent.$parent
  }
  parent.$children.push(vm)
 }

 vm.$parent = parent
 vm.$root = parent ? parent.$root : vm

 vm.$children = []
 vm.$refs = {}

 vm._watcher = null
 vm._inactive = null
 vm._directInactive = false
 vm._isMounted = false
 vm._isDestroyed = false
 vm._isBeingDestroyed = false
}

这个函数主要是有父实例的情况下处理vm.$parent和vm.$children这俩个实例属性,我此处没有就跳过,其他的就是新增了一些实例属性

2.initEvents

function initEvents (vm: Component) {
 vm._events = Object.create(null)
 vm._hasHookEvent = false
 // init parent attached events
 const listeners = vm.$options._parentListeners
 if (listeners) {
  updateComponentListeners(vm, listeners)
 }
}

又新增两个属性,后面那个if条件里面是有父组件的事件时初始化,估计就是props和events父子组件通信的事件内容。

3.initRender

function initRender (vm: Component) {
 vm._vnode = null // the root of the child tree
 vm._staticTrees = null
 const parentVnode = vm.$vnode = vm.$options._parentVnode
 const renderContext = parentVnode && parentVnode.context
 vm.$slots = resolveSlots(vm.$options._renderChildren, renderContext)
 vm.$scopedSlots = emptyObject 
 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)  
 vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
 const parentData = parentVnode && parentVnode.data  
 /* istanbul ignore else */
 if (process.env.NODE_ENV !== 'production') {
  defineReactive(vm, '$attrs', parentData && parentData.attrs, () => {
   !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
  }, true)
  defineReactive(vm, '$listeners', vm.$options._parentListeners, () => {
   !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
  }, true)
 } else {
  defineReactive(vm, '$attrs', parentData && parentData.attrs, null, true)
  defineReactive(vm, '$listeners', vm.$options._parentListeners, null, true)
 }
}

此函数也是初始化了节点属性信息,绑定createElement函数到实例【并未挂载】,接下来调用beforeCreate回调钩子;——TODO1:后续专题分析VUE渲染逻辑

4.initInjections

function initInjections (vm: Component) {
 const result = resolveInject(vm.$options.inject, vm)
 if (result) {
  observerState.shouldConvert = false
  Object.keys(result).forEach(key => {
   /* istanbul ignore else */
   if (process.env.NODE_ENV !== 'production') {
    defineReactive(vm, key, result[key], () => {
     warn(
      `Avoid mutating an injected value directly since the changes will be ` +
      `overwritten whenever the provided component re-renders. ` +
      `injection being mutated: "${key}"`,
      vm
     )
    })
   } else {
    defineReactive(vm, key, result[key])
   }
  })
  observerState.shouldConvert = true
 }
}

此函数也是当有inject属性时做处理,源码例子无inject断点跑暂时跳过

5.initState

function initState (vm: Component) {
 vm._watchers = []
 const opts = vm.$options
 if (opts.props) initProps(vm, opts.props)
 if (opts.methods) initMethods(vm, opts.methods)
 if (opts.data) {
  initData(vm)
 } else {
  observe(vm._data = {}, true /* asRootData */)
 }
 if (opts.computed) initComputed(vm, opts.computed)
 if (opts.watch && opts.watch !== nativeWatch) {
  initWatch(vm, opts.watch)
 }
}

可以看出此处是对options传入的props/methods/data/computed/watch属性做初始化————TODO2:分析每个属性的初始化

6.initProvide

function initProvide (vm: Component) {
 const provide = vm.$options.provide
 if (provide) {
  vm._provided = typeof provide === 'function'
   ? provide.call(vm)
   : provide
 }
}

这个函数跟4.initInjections在同一个inject.js中,也是在传入参数有provide属性时做处理,暂时跳过,然后就到了created回调钩子,最后的vm.$mount接入TODO1;

今天initMixin到此结束,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
为输入框加入数字js校验代码分享
Nov 02 #Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 #Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 #Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 #Javascript
vue-resource + json-server模拟数据的方法
Nov 02 #Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 #Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
php你的验证码安全码?
2007/01/02 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python django事务transaction源码分析详解
2017/03/17 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python基础之文件读取的讲解
2019/02/16 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python实现处理mysql结果输出方式
2020/04/09 Python
python3的pip路径在哪
2020/06/23 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
陈安之励志演讲稿
2014/08/21 职场文书
安全责任书范文
2014/08/25 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
浅谈MySQL函数
2021/10/05 MySQL