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

我们看到了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到此结束,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-11-01

浅谈Vue 初始化性能优化

前言 一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢.在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路. 性能瓶颈在哪里? 先看一下常见的vue写法:在html里放一个app组件,app组件里又引用了其他的子组件,形成一棵以app为根节点的组件树. <body> <

浅谈webpack 构建性能优化策略小结

背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,React,Vue,Angular等诸多知名项目也都相继选用其作为官方构建工具,极受业内追捧.但是,随者工程开发的复杂程度和代码规模不断地增加,webpack暴露出来的各种性能问题也愈发明显,极大的影响着开发过程中的体验. 问题归纳 历经了多个web项目

浅谈vue项目打包优化策略

使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以优化的点.如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件. 示例如下: 1.1 element-ui 首先,安装 babel-plugin-component: npm install babe

浅谈vue加载优化策略

vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌.今天我们以vue cli3.x来说一说如何行之有效的缓解此问题! 方法一 路由懒加载 首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面,而路由懒加载就是来解决这个问题的.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.下面这个

浅谈vue首屏加载优化

本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp

浅谈Vue.js之初始化el以及数据的绑定说明

1.初始化el 2.数据绑定说明 3.监听值的变化 以上这篇浅谈Vue.js之初始化el以及数据的绑定说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

浅谈Vue.js 1.x 和 2.x 实例的生命周期

在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1.x 的生命周期钩子 1. init 在实例开始初始化时同步调用.此时数据观测.事件和Watcher都尚未初始化. 2. created 在实例化创建之后同步调用.此时实例已经结束解析选项,已建立:数据绑定.计算属性.方法.Watcher/事件回调,但是还没有开始DOM编译,$el还不存在. 3. b

浅谈VUE监听窗口变化事件的问题

Vuejs 本身就是一个 MVVM 的框架.但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize恩,我做之前也是百度了一下.看到大家伙都为这个问题而发愁. 问题: 今天我也 遇到了这样一个问题, 是关于canvas 自适应. 根据窗口的变化去变化 canvas 的宽度备注: 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 (这里用的 Vue 2.x .ES6) 解决方案: 第一步: 先在 data 中去 定义 一个记录宽

浅谈vue单一组件下动态修改数据时的全部重渲染

今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定

浅谈Pytorch torch.optim优化器个性化的使用

一.简化前馈网络LeNet import torch as t class LeNet(t.nn.Module): def __init__(self): super(LeNet, self).__init__() self.features = t.nn.Sequential( t.nn.Conv2d(3, 6, 5), t.nn.ReLU(), t.nn.MaxPool2d(2, 2), t.nn.Conv2d(6, 16, 5), t.nn.ReLU(), t.nn.MaxPool2d(2