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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
JavaScript实现滑块验证解锁
Jan 07 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
数据库相关问题
2006/10/09 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
JavaScript 参考教程
2006/12/29 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
python实现排序算法
2014/02/14 Python
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python中引用与复制用法实例分析
2015/06/04 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
django框架ModelForm组件用法详解
2019/12/11 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
产品销售计划书
2014/05/04 职场文书
房地产开发项目建议书
2014/05/16 职场文书
关于工作经历的证明书
2014/10/11 职场文书
离婚律师函范本
2015/05/27 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
python内置进制转换函数的操作
2021/06/02 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers