组件化

intro

Vue.js是另一个核心思想就是组件化。所谓组件化，就是把页面拆分成多个组件（component）。组件在系统内部可复用，组件和组件直接可以嵌套

接下来我们分析Vue组件内部是怎么工作的。

import Vue from 'vue'
import App from './App.vue'

var app = new Vue({
  el: '#app',
  // 这里的 h 是 createElement 方法
  render: h => h(App)
})

createComponent

在上面调用render方式的时候，最后会调用_createElement方法，像此处，传入的不为string类型，则会调用createComponent方法

let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
  // platform built-in elements
  vnode = new VNode(
    config.parsePlatformTagName(tag), data, children,
    undefined, undefined, context
  )
} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
  // component
  vnode = createComponent(Ctor, data, context, children, tag)
} else {
  // unknown or unlisted namespaced elements
  // check at runtime because it may get assigned a namespace when its
  // parent normalizes children
  vnode = new VNode(
    tag, data, children,
    undefined, undefined, context
  )
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}

我们在src/core/vdom/create-component.js中找到createComponent方法

export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
  if (isUndef(Ctor)) {
    return
  }

  const baseCtor = context.$options._base

  // plain options object: turn it into a constructor
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor)
  }

  // if at this stage it's not a constructor or an async component factory,
  // reject.
  if (typeof Ctor !== 'function') {
    if (process.env.NODE_ENV !== 'production') {
      warn(`Invalid Component definition: ${String(Ctor)}`, context)
    }
    return
  }

  // async component
  let asyncFactory
  if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)
    if (Ctor === undefined) {
      // return a placeholder node for async component, which is rendered
      // as a comment node but preserves all the raw information for the node.
      // the information will be used for async server-rendering and hydration.
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }

  data = data || {}

  // resolve constructor options in case global mixins are applied after
  // component constructor creation
  resolveConstructorOptions(Ctor)

  // transform component v-model data into props & events
  if (isDef(data.model)) {
    transformModel(Ctor.options, data)
  }

  // extract props
  const propsData = extractPropsFromVNodeData(data, Ctor, tag)

  // functional component
  if (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(Ctor, propsData, data, context, children)
  }

  // extract listeners, since these needs to be treated as
  // child component listeners instead of DOM listeners
  const listeners = data.on
  // replace with listeners with .native modifier
  // so it gets processed during parent component patch.
  data.on = data.nativeOn

  if (isTrue(Ctor.options.abstract)) {
    // abstract components do not keep anything
    // other than props & listeners & slot

    // work around flow
    const slot = data.slot
    data = {}
    if (slot) {
      data.slot = slot
    }
  }

  // install component management hooks onto the placeholder node
  installComponentHooks(data)

  // return a placeholder vnode
  const name = Ctor.options.name || tag
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  )

  // Weex specific: invoke recycle-list optimized @render function for
  // extracting cell-slot template.
  // https://github.com/Hanks10100/weex-native-directive/tree/master/component
  /* istanbul ignore if */
  if (__WEEX__ && isRecyclableComponent(vnode)) {
    return renderRecyclableComponentTemplate(vnode)
  }

  return vnode
}

生命周期

每一个Vue实例在被初始化之前都要经过一系列的初始化过程。同时在这个过程中会运行一些叫做声明周期的钩子函数。

在源码中最终执行生命周期的函数调用callHook方法，它定义在src/core/instance/lifecycle

export function callHook (vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm)
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()
}

callHook函数根据传入的字符串hook，去拿vm.$options[hook]对应的回调函数数组，然后遍历执行，执行的时候把vm作为函数执行的

beforeCreate & created

beforeCreate和created函数都在实例化Vue的阶段，在init方法中执行，在src/core/instance/init.js中

Vue.prototype._init = function (options?: Object) {
  // ...
  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')
  // ...
}

beforeCreate和created的钩子在initState前后，而initState的作用是初始化props、data、methods、watch、computed等属性，所以在beforeCreate中就不能获取props和data中定义的值，也不能调用methods中的方法

beforeMount & mounted

在src/core/instance/lifeCycle.js中

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // ...
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

在vm._render()函数渲染VNode之前，执行了beforeMount钩子函数，在执行完vm._update()把VNode patch后，执行 mounted

ps:这里有一个判断逻辑，即vm.$node为null的时候，则表明这不是一次组件的初始化过程。对于组件的话，mounted的时机在

在src/core/vdom/patch.js中

function invokeInsertHook (vnode, queue, initial) {
  // delay insert hooks for component root nodes, invoke them after the
  // element is really inserted
  if (isTrue(initial) && isDef(vnode.parent)) {
    vnode.parent.data.pendingInsert = queue
  } else {
    for (let i = 0; i < queue.length; ++i) {
      queue[i].data.hook.insert(queue[i])
    }
  }
}

该函数会执行insert这个钩子函数，对于组件而言，insert钩子函数的定义在src/core/vdom/create-component.js中的componentVNodeHooks

const componentVNodeHooks = {
  // ...
  insert (vnode: MountedComponentVNode) {
    const { context, componentInstance } = vnode
    if (!componentInstance._isMounted) {
      componentInstance._isMounted = true
      callHook(componentInstance, 'mounted')
    }
    // ...
  },
}

mounted钩子函数的执行顺序也是先子后父

beforeUpdate & updated

beforeUpdate的执行时机是在渲染Watcher的before函数中

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // ...
}

ps: 这里有个判断，也就是在组件mounted之后，才会调用这个钩子函数

update的执行时机是在flushScheduleQueue函数调用的时候，它的定义在src/core/observer/scheduler.js

function flushSchedulerQueue () {
  // ...
  // 获取到 updatedQueue
  callUpdatedHooks(updatedQueue)
}

function callUpdatedHooks (queue) {
  let i = queue.length
  while (i--) {
    const watcher = queue[i]
    const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted) {
      callHook(vm, 'updated')
    }
  }
}

在组件mounted的过程中，会实例化一个渲染的Watcher去监听vm上数据的变化重新渲染，这段逻辑发生在mountComponent函数执行的时候

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...
  // 这里是简写
  let updateComponent = () => {
      vm._update(vm._render(), hydrating)
  }
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // ...
}

在实例化Watcher的过程中，在它的构造函数里会判断isRenderWatcher，接着把当前的watcher的实例复制给vm._wathcer，定义在src/core/observer/watcher.js中

export default class Watcher {
  // ...
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // ...
  }
}

同时，还把当前watcher实例push到vm._watchers中，vm._watcher是专门用来监听vm上数据变化然后重新渲染的，所以它是一个渲染相关的watcher，因此在callUpdatedHooks函数中，只有vm._watcher的回调执行完毕后，才会执行updated钩子函数

beforeDestroy & destroyed 在组件销毁过程之后，最终会调用$destory方法，在src/core/instance/lifecycle.js中

Vue.prototype.$destroy = function () {
    const vm: Component = this
    if (vm._isBeingDestroyed) {
      return
    }
    callHook(vm, 'beforeDestroy')
    vm._isBeingDestroyed = true
    // remove self from parent
    const parent = vm.$parent
    if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
      remove(parent.$children, vm)
    }
    // teardown watchers
    if (vm._watcher) {
      vm._watcher.teardown()
    }
    let i = vm._watchers.length
    while (i--) {
      vm._watchers[i].teardown()
    }
    // remove reference from data ob
    // frozen object may not have observer.
    if (vm._data.__ob__) {
      vm._data.__ob__.vmCount--
    }
    // call the last hook...
    vm._isDestroyed = true
    // invoke destroy hooks on current rendered tree
    vm.__patch__(vm._vnode, null)
    // fire destroyed hook
    callHook(vm, 'destroyed')
    // turn off all instance listeners.
    vm.$off()
    // remove __vue__ reference
    if (vm.$el) {
      vm.$el.__vue__ = null
    }
    // release circular reference (#6759)
    if (vm.$vnode) {
      vm.$vnode.parent = null
    }
  }

beforeDestory钩子函数的执行时机是在$destory函数执行最开始的地方，接着执行了一系列的销毁动作，包括从parent和$children中删除自身，删除watcher,当前渲染的VNode执行销毁钩子函数等，最后调用destory函数。

在$destory的执行过程中，它又会执行vm.patch(vn._node, null)触发它子组件的销毁钩子函数，这样一层层的递归调用，所以destory的钩子函数也是先子后父。

组件注册

Vue.js提提供了2种组件的注册方式，全局注册和局部注册。

全局注册

要注册一个全局组件，可以使用Vue.component(tagName, options)。

Vue.component('my-component', {
  // 选项
})

Vue.component的定义在src/core/global-api/assets.js中

import { ASSET_TYPES } from 'shared/constants'
import { isPlainObject, validateComponentName } from '../util/index'

export function initAssetRegisters (Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach(type => {
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
          validateComponentName(id)
        }
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

函数首先遍历ASSET_TYPES，得到type后挂载到Vue上，ASSET_TYPES定义在src/shared/constants.js

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

即Vue是初始化了3个全局函数，并且type是component并且definition是一个对象时，通过this.options._base.extend，相当于Vue.extend把这个对象转换成一个继承于Vue的构造函数，最后通过this.options[type+'s'][id] = definition把它挂载到Vue.options.components上

由于每个组件的创建都是通过Vue.extend继承而来，在继承过程中有一段mergeOptions的逻辑

Sub.options = mergeOptions(
	Super.options,
	extendOptions
)

也就是会把Vue.options合并到Sub.options（即组件的options），在组件实例化的过程中，会执行merge options逻辑，把Sub.options.components合并到vm.$options.components上

在创建vnode的过程中，会执行_createElement方法（定义在src/core/vdom/create-element.js）

export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
  // ...
  let vnode, ns
  if (typeof tag === 'string') {
    //...
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
     
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }
  // ...
}

这里有一个判断逻辑 isDef(Ctor = resolveAsset(context.$options, 'components', 'tag'))，这个方法定义在src/core/utils/options.js中

/**
 * Resolve an asset.
 * This function is used because child instances need access
 * to assets defined in its ancestor chain.
 */
export function resolveAsset (
  options: Object,
  type: string,
  id: string,
  warnMissing?: boolean
): any {
  /* istanbul ignore if */
  if (typeof id !== 'string') {
    return
  }
  const assets = options[type]
  // check local registration variations first
  if (hasOwn(assets, id)) return assets[id]
  const camelizedId = camelize(id)
  if (hasOwn(assets, camelizedId)) return assets[camelizedId]
  const PascalCaseId = capitalize(camelizedId)
  if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]
  // fallback to prototype chain
  const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]
  if (process.env.NODE_ENV !== 'production' && warnMissing && !res) {
    warn(
      'Failed to resolve ' + type.slice(0, -1) + ': ' + id,
      options
    )
  }
  return res
}

这段逻辑就是校验component名，先用过const assets = options[type]拿到 assets，然后尝试assets[id]，这里有个顺序，先直接从id拿，如果不存在，则把id变成驼峰的形式再拿，如果仍然不存在，则在驼峰基础上把首字母变成大写的形式再拿，如果仍然取不到，则报错。

回到调用resolveAeest(content.$options, 'component', tag)，即拿vm.$options.components[tag] ,这样我们就可以在resolveAsset的时候拿到这个组件的构造函数，并作为createComponent的钩子函数

局部注册

Vue.js也同样支持局部注册

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}

跟全局组件一样，在组件实例化的过程中，有一个mergeOptions的逻辑，所以就把components合并到vm.$options.components上，这样我们就可以在resolveAsset的时候拿到这个组件的构造函数，并作为createComponent的钩子的参数 ps:局部注册和全局注册不同的是，只有该类型的组件才可以访问局部注册的子组件，而全局注册是扩展到Vue.options下，所以在所有组件的创建过程中，都会从全局的Vue.options.components扩展到当前组件的vm.$options.components下，从而使得全局注册的组件能被任意使用。

异步组件

在我们开发的过程中，为了减少首屏代码体积，往往会把一些非首屏的组件设计成异步组件，按需加载这里有三种实现方式工厂函数

Vue.component('async-example', function (resolve, reject) {
   // 这个特殊的 require 语法告诉 webpack
   // 自动将编译后的代码分割成不同的块，
   // 这些块将通过 Ajax 请求自动下载。
   require(['./my-async-component'], resolve)
})

Promise创建组件

Vue.component(
  'async-webpack-example',
  // 该 `import` 函数返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

高级异步组件

const AsyncComp = () => ({
  // 需要加载的组件。应当是一个 Promise
  component: import('./MyComp.vue'),
  // 加载中应当渲染的组件
  loading: LoadingComp,
  // 出错时渲染的组件
  error: ErrorComp,
  // 渲染加载中组件前的等待时间。默认：200ms。
  delay: 200,
  // 最长等待时间。超出此时间则渲染错误组件。默认：Infinity
  timeout: 3000
})
Vue.component('async-example', AsyncComp)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

组件化.md

组件化.md

组件化

intro

createComponent

生命周期

组件注册

异步组件

Files

组件化.md

Latest commit

History

组件化.md

File metadata and controls

组件化

intro

createComponent

生命周期

组件注册

异步组件